AJAX validation with Jquery

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

where is your ajax validation code.

Jai
– Jai

2012-12-07 06:03:49 +00:00
Commented Dec 7, 2012 at 6:03 — Jai
– Jai, Commented Dec 7, 2012 at 6:03

Abhilash · Accepted Answer · 2012-12-07 06:27:55Z

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.

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

<input type="text" id="name" placeholder="Name">
Add a further condition to the validation for name like this:

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

This should hopefully, fix your problems

edited Dec 7, 2012 at 6:27

answered Dec 7, 2012 at 6:04

Abhilash

1,6109 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Blake Over a year ago

I did both of those suggestions and when I submit it with both fields blank it still says that only the email is required, I put in my var as $('form #name_input') and it shows the message but it doesnt go away once I submit just the email portion does

Blake Over a year ago

perfect! worked like a charm Thank you for your quick response!

Collectives™ on Stack Overflow

AJAX validation with Jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related