Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I'm fairly new to Javascript/jQuery. 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. I appreciate any help!

<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>
share|improve this question

1 Answer

up vote 0 down vote accepted

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);
                }
            });
        });
    });
});
share|improve this answer
 
You're awesome! Thank you! –  Justin Mar 31 at 7:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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