3
\$\begingroup\$

The scripts below, I've obtained through tutorials and edited the best I know how. It all works - but I'd like to place them in one, external script. If at all possible, I'd appreciate some help in cleaning up the code too. I've a feeling some of it is redundant.

With the client-side validation script, I have "Name," "Email," "Phone," and "Message" set as input text values in the HTML. If they submit the form with those default values still in place, it gives an error. Also gives one when email is not valid or if phone is not actually a phone number. BUT the phone number is not required. So, the default value of "Phone" could pass through if nothing at all is entered there.

<script type="text/javascript">
$(document).ready(function() {
    $('nav a[href^="#"]').bind('click.smoothscroll',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
    $('a[href=#top]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
    $(function() {
        $("nav select").change(function() {
            window.location = $(this).find("option:selected").val();
        });
    });
</script>
<script>
$(document).ready(function(){
    // Place ID's of all required fields here.
    required = ["name", "email", "message"];
    // If using an ID other than #email or #error then replace it here
    email = $("#email");
    phone = $("#tel");
    errornotice = $("#error");
    // The text to show up within a field when it is incorrect
    emptyerror = "Required field.";
    emailerror = "Invalid email.";
    nameerror = "Name";
    phoneerror = "Phone";
    messageerror = "Message";
    onlynumber = "Invalid phone.";

    $("#contact").submit(function(){    
        //Validate required fields
        for (i=0;i<required.length;i++) {
            var input = $('#'+required[i]);
            if ((input.val() == "") || (input.val() == emptyerror) || (input.val() == nameerror) || (input.val() == messageerror)) {
                input.addClass("needsfilled");
                input.val(emptyerror);
                errornotice.fadeIn(750);
            } else {
                input.removeClass("needsfilled");
            }
        }
        // Validate the e-mail.
        if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
            email.addClass("needsfilled");
            email.val(emailerror);
        }

            if(phone.val() != phoneerror) {
        if (!/\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/.test(phone.val())) {
                phone.addClass("needsfilled");
                phone.val(onlynumber);
    }
}

        //if any inputs on the page have the class 'needsfilled' the form will not submit
        if ($(":input").hasClass("needsfilled")) {
            return false;
        } else {
            errornotice.hide();
            return true;
        }
    });

    // Clears any fields in the form when the user clicks on them
    $(":input").focus(function(){       
       if ($(this).hasClass("needsfilled") ) {
            $(this).val("");
            $(this).removeClass("needsfilled");
       }
    });
});
</script>
<script>
$(function(){
        $('input, textarea').each(function(){
            var txtval = $(this).val();
            $(this).focus(function(){
                $(this).val('')
            });
            $(this).blur(function(){
                if($(this).val() == ""){
                    $(this).val(txtval);
                }
            });
        });
    });
</script>
\$\endgroup\$
1
\$\begingroup\$

basically just cleaned up some redundant brackets, tags, added a comment and modified existing comments, fixed indentations etc. Then i ran it through JSLint(http://www.jslint.com/), enjoy :)!

$(document).ready(function() {
    $('nav a[href^="#"]').bind('click.smoothscroll',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
    $('a[href=#top]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
    $(function() {
        $("nav select").change(function() {
            window.location = $(this).find("option:selected").val();
        });
    });

    //place ID's of all required fields here.
    required = ["name", "email", "message"];
    //if using an ID other than #email or #error then replace it here
    email = $("#email");
    phone = $("#tel");
    errornotice = $("#error");
    //the text to show up within a field when it is incorrect
    emptyerror = "Required field.";
    emailerror = "Invalid email.";
    nameerror = "Name";
    phoneerror = "Phone";
    messageerror = "Message";
    onlynumber = "Invalid phone.";

    $("#contact").submit(function(){    
        //validate required fields
        for (i = 0; i < required.length; i++) {
            var input = $('#' + required[i]);
            if (input.val() == "" || input.val() == emptyerror || input.val() == nameerror || input.val() == messageerror) {
                input.addClass("needsfilled");
                input.val(emptyerror);
                errornotice.fadeIn(750);
            } else {
                input.removeClass("needsfilled");
            }
        }
        //validate the e-mail.
        if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
            email.addClass("needsfilled");
            email.val(emailerror);
        }

        //validate phone
        if(phone.val() != phoneerror) {
            if (!/\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/.test(phone.val())) {
                phone.addClass("needsfilled");
                phone.val(onlynumber);
            }
        }

        //if any inputs on the page have the class 'needsfilled' the form will not submit
        if ($(":input").hasClass("needsfilled")) {
            return false;
        } else {
            errornotice.hide();
            return true;
        }
    });

    //clears any fields in the form when the user clicks on them
    $(":input").focus(function(){       
       if ($(this).hasClass("needsfilled") ) {
            $(this).val("");
            $(this).removeClass("needsfilled");
       }
    });


    $(function(){
        $('input, textarea').each(function(){
            var txtval = $(this).val();
            $(this).focus(function(){
                $(this).val('')
            });
            $(this).blur(function(){
                if($(this).val() == ""){
                    $(this).val(txtval);
                }
            });
        });
    });
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.