Validation

[Brightonmike]

I’m using the sliding form script written originally by the wonderful Mary Lou of Codrops.

I’ve hacked it about a fair bit to adjust the functionality and get it working for me, however there’s a couple of things I need to address.

First of all, I need the script to validate the fields in the last slide. I don’t want additional slides. I have tried adding the function to the onClick for the submit button but it won’t work. I’ve also tried creating a separate onClick but that didn’t either, I presume because it conflicted with the other. I just want it so if the user has not filled in a departure date, they cannot submit the form and the field is highlighted red.

Secondly I’d like to add in checkbox validation for the terms bit. It works fine with HTML5 browsers using the “required” but I’d like it to work with the script too. Again I’ve tried going down the usual routes but I couldn’t get it working.

There’s a couple of other “extra” bits I’d like the script to do too, which are not really essential but would be nice! The first is I want what fields the user has to fill in to adjust depending on the drop downs. For example, if the user selects a return flight, I want it compulsory for them to fill in a return date.

Also, it would be nice if the form automatically scrolled to the first field with an error, rather than the user having to manually click back to fix their mistakes.

Here’s my Fiddle: http://jsfiddle.net/brightonmike/pFduv/#base

Thank you in advance! I’m slowly getting there with jQuery, I think I have the right ideas, I just get the syntax slightly wrong.

[Brightonmike]

The validation issue is kind of urgent.

Please, any ideas?

[Brightonmike]

I don’t often keep bumping like this, but this is really important. Would anybody know how to make the last fields validate? The rest doesn’t matter as much. Thank you.

[jamygolden]

You could probably find some sort of validation plugin to help you.

I don’t think what you want to do is difficult, it’s just a bit of work.

$('form').submit( function () {



if ( !$('.checkbox').is(':checked') ) {

return false;

}



});

If you click submit, it will check if .checkbox is checked, if not it will not submit. You could also add errors, etc in that if statement.

“For example, if the user selects a return flight”

$('.some-select').find('option').click( function () {

if ( $(this).attr('value') == 'flight' ) {

$('#some-field').addClass('required').show();

} else {

$('#some-field').removeClass('required').hide();

}

});

If the html was:

Karate

Trees

Flight

Mobile Phone

If one clicked on the flight option, the #some-field element would appear with a class of “required”. You could use this .required on the submit check.

$('form').submit( function() {

if ( $(this).find('.required').val() ) {

return false;

}

});

If submit is clicked, a quick search for a class of required happens. If any field with this class exists and is empty, the submit will fail.

As you can see, it’s a fair bit of work for a large form without a validation plugin. Did I help answer your question or was I all over the place?

[Brightonmike]

That’s some great help and pointers there.

I could use the validation plugin – but to me it doesn’t make sense to add a lot of extra jQuery just because of one field. The current setup already handles validation for the rest of the fields – the problem is it only validates the fields when you advance slides.

Sure, the validation is pretty basic. At the moment it doesn’t make sure someone actually types an email address into the email field. But we never have that problem, so it doesn’t currently needs to be solved.

The code you’ve posted for the drop down select definitely looks right to me! So I will try that. The current plugin does already check for the required fields.

Edit, I have successfully got the drop down working. If I’d actually thought about my existing code for a second!!!

/* 
$(function() {

function checkMultiLeg(select_id){

if($('option:selected', select_id).val() == "Multi Leg"){

$('#Via').show();

$('#via').addClass('required')

} else {

$("#Via").hide();

$('#via').removeClass('required')

}

}



checkMultiLeg('#FlightType');



$("#FlightType").change(function(){

checkMultiLeg(this);

});

});

/* ]]> */

[jamygolden]

Great! Let me know if you run into any problems.

[Brightonmike]

I’m so close! The checkbox is working now. However, it still refuses to reject the submission if the fields on the last slide are not filled in. This is my code:

    /*

if there are errors don't allow the user to submit

*/

$('#registerButton').bind('click',function(){

if($('#slidequoteform').data('errors')){

alert('Please correct the errors in the Form. Make sure you have filled in all fields correctly - this makes it quicker for us to process your request. Please note we do log all IP addresses of submissions.');

return false;

}

if ( !$('#check').is(':checked') ) {

alert('You must accept out terms and conditions to proceed.');

return false;

}

if ( $(this).find('.required').val() ) {

alert('Please correct the errors in the Form. Make sure you have filled in all fields correctly - this makes it quicker for us to process your request. Please note we do log all IP addresses of submissions.');

return false;

}



});

I am still able to submit without the last field being filled in, despite it having the .required class. My full code is here: http://jsfiddle.net/brightonmike/pFduv/8/

[jamygolden]

Replace this:

if ( $(this).find('#depdate').val() ) {

with this:

if ( !$(this).find('#depdate').val() ) {

[Brightonmike]

Brilliant! Thank you so much. Crazy to think how just an exclamation mark makes a difference – will look it up.

Edit – the error is still coming up even with the field filled in. Must just be something silly.

[Brightonmike]

What I don’t get is why it won’t let me perform the validation when you click the submit button as well as when advancing the slides. All I should be able to do is attach the validation functions to the onclick for the button, and then IF the validation fails it brings up the error. But when I try to do this, it doesn’t let me.

[jamygolden]

I don’t understand what you mean. What are you trying to do and what is not working?

If you find this:

$('#next').bind('click',function(e){

var $this    = $(this);

$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();

/* force the blur for validation */

$(this).blur();

e.preventDefault();

});

And replace it with this:

$('#next').bind('click',function(e){



if($('.step').eq(current - 1).find('.required').val() == '' ){

alert('Please correct the errors in the Form. Make sure you have filled in all fields correctly - this makes it quicker for us to process your request. Please note we do log all IP addresses of submissions.');

return false;

}



var $this    = $(this);

$('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click();

/* force the blur for validation */

$(this).blur();

e.preventDefault();

});

It will stop you from progressing

[Brightonmike]

The #next and #finish are the two blue buttons on first/second slide. I like the idea of stopping people progressing – but even with that code, I am still able to submit the form without filling in the departure date field on the last slide.

What I want to do is as well as performing validation on #next and #finish, to perform it when the user clicks submit. i.e. if they click submit, and haven’t filled in the departure date, it doesn’t submit the form and highlights the field with the red border.

Does that make sense? Thank you loads for your help, sorry I haven’t been clear!

[jamygolden]

It does work exactly like you think it does :p
http://jsfiddle.net/pFduv/11/

You just need to add

        if($('.step').eq(current - 1).find('.required').val() == '' ){

alert('no.');

return false;

}

to the buttons you want to disable if the required fields aren’t filled out.

[Brightonmike]

Works perfectly! Thank you!

[Brightonmike]

I have a hatred for alerts (the way they stop you doing anything with the browser etc) so I have replaced the alert box’s with a simple div that pops up. Think it’s much better for usability!

http://jsfiddle.net/brightonmike/pFduv/13/

[Author]

Posts