Question

I am setting up my error message on my form with jquery and when I go and view it it does not ask that the name field be required but just the email even though I have included it. Here is my code:

<form method="post" action="" id="contactform">
            <fieldset class="first">


            <div id="response"></div>  


            <div class="name_input">                
            <input name="name" id="name" class="required" type="text" onfocus="if(this.value == 'Name'){this.value = '';}" onblur="if(this.value == ''){this.value='Name';}" value="Name" maxlength="128" />                
            </div>



            <div id="email_input">              
            <input id="email" name="email" onfocus="if(this.value == 'Email'){this.value = '';}"  onblur="if(this.value == ''){this.value='Email';}" class="required" type="text" value="Email" maxlength="128" />         
            </div>

            <div id="button">
            <input type="submit" class="button" name="Submit" value="" />
            </div>


            </fieldset>


        </form>

and my JS:

$(document).ready(function() {

$('form #response').hide();

$('#button').click(function(e) {


    e.preventDefault();


    var valid = '';
    var required = ' is required.';
    var name = $('form #name').val();
    var email = $('form #email').val();



    if (name == '' || name.length < 2) {
        valid = '<p>Your name' + required +'</p>';  
    }

    if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
        valid += '<p>Your email' + required +'</p>';                                                  
    }



    if (valid != '') {

        $('form #response').removeClass().addClass('error')
            .html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('fast');           

    }


    else {

        $('form #response').removeClass().addClass('processing').html('Processing...').fadeIn('fast');                                      

        var formData = $('form').serialize();
        submitForm(formData);           
    }           

  });
});

There are not any conflicts with my name tag anywhere else so I dont know what may be happening

Answer 1

This line is the culprit

if (name == '' || name.length < 2) {

When the field has 1 character, it will evaluate to false, and not bother to check the next condition for name.length

You can simplify the code by just having this

if (name.length < 2) {

This will also work if name=''.

Also, to trim away leading and trailing spaces, you might want to get the name field like this:

var name = $.trim( $('form #name').val() );

That way just two or more spaces in the field will also trigger the validation.

Update:

The trouble is you have a value in the input field already. You are using a focus/blur event to remove/add it as needed. That will count as a value with length = 4 when you are validating it.

There are a couple of ways to solve it.

1. Use placeholder. It is supported in all modern browsers like this:

   <input type="text" id="name" placeholder="Name">

2. Add a further condition to the validation for name like this:

   if (name === 'Name' || name.length < 2 ) {

This should hopefully, fix your problems