March 23, 2012

Stop user from progressing in a multi-step jQuery form if datepicker value is blank

Question by methuselah

How would I validate the “date picker” field on step 3 of my multi-step jQuery form. Right now the field just checks if $(‘#datepicker’).val() is empty by sending an alert but still lets the user carry on until the next stage. How do you prevent the user from carrying on if the field is blank?

It can be found here: http://jsfiddle.net/xSkgH/28/

Thanks in advance!

Answer by Starx

Pretty simple, just return false;

if (!$('#datepicker').val()){
     //alert('no date!');   
     return false;                
}

Fixed fiddle

Updated Demo with inline Message

if (!$('#datepicker').val()){
    $("#errorMessage").html('no date!');   
    return false;                
}

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!