Validation

[jamygolden]

Yeah that’s much better! I used to use alerts for testing purposes, whereas now I use console.log() in it’s place.

[Brightonmike]

Found a way to make it so if the user selects a return flight, they must fill in the return date too. I couldn’t do this using the multi-leg method because I can’t check for “required” fields on the last slide.

So the way I am doing it is I have code it so whether or not the flight is a return, there must be a value in the return field for the form to submit. Then I add to the conditional a bit of code that inserts a word into the return date field if the user has selected a single flight. This means single flights still submit because technically the field has a value, a value we can just ignore.

Then, if the user selects a return flight, the script removes this value so the field is blank so they have to fill it in to submit.

Have to say I think that was a stroke of genius! :P

    /* 
$(function() {

function checkSingle(select_id){

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

$('#Return').hide();

$('#retdate').val('3');

} else {

$("#Return").show();

$('#retdate').val('');

}

}



checkSingle('#FlightType');



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

checkSingle(this);

});

});

/* ]]> */

        if ( !$('#retdate').val() ) {

$('#errorbox').css('display','block');

$('p.errorbox').replaceWith( "
Please complete the return date.
" );

$('#retdate').css('border','1px solid #bc3048');

return false;

}       

[Brightonmike]

For some reason, that works in a fiddle, but on the actual site it doesn’t seem to actually populate the value of the field so doesn’t allow you to submit. Not the most important thing in the world, just thought I had it figured!

[jamygolden]

“I can’t check for “required” fields on the last slide.” – Why do you say that?

[Brightonmike]

I mean, I can’t use the scripts method of adding the class “required” to the fields on the last slide, which is why I’m not doing that for the departure date either and instead checking it individually when the user tries to submit.

I don’t think anyone has ever submitted the form without the return date if required so to be honest it’s not a big deal so I don’t mind it not checking that field.

[jamygolden]

Yeah but I mean, why can’t you check on the last slide? I’m asking because I did it successfully.

[Brightonmike]

I’m confused. The only way we were able to validate the departure field was by adding this:

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

alert('Please complete the departure date.');

return false;

}

The rest of the form is checked using:

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

$('#errorbox').css('display','block');

return false;

}

which doesn’t check the fields on the last slide hence the above?

[Brightonmike]

Oh crikey, I completely missed what you meant. I can just add this to the submit function:

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

alert('no.');

return false;

}

Oh man.

[Brightonmike]

I’ve got this far now: http://jsfiddle.net/brightonmike/pFduv/16/

However the conditional for the return date field isn’t working. It shows the return date field, and adds the “required” class, but whilst the code is now working properly for the departure field it still ignores the return field, despite the required class being added.

[jamygolden]

Lol oh yeah right, well it should check it :p – I’ve spent a bit too much time trying to find out why, but the JS is a bit too messy to really understand what’s going on ( for me at least ). I feel the validation and the and the slider should be completely separate within the js. The validation should pretty much be 1 small function but it’s got a bit out of hand.

This would pretty much be my validation:

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

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

alert('something');

return false;

}

});

And if you want a validate step option, I’d do this:

function validateStep( el ) {

if ( $( el ).closest('.step').find('.required').val() == '' ) {

alert('something');

return false;

}

}



// slider

$('#next').click( function() {

validateStep( this );

});

[Brightonmike]

Thanks Jamy. To be honest I agree with you. I only really started getting to grips with jQuery a few months ago so I’ve had to use existing scripts. Now I’m thinking this needs something unique. And I’ve learnt enough to feel like it’s worth a shot, especially having had so much help from people like you.

Thanks a lot and if I have a go, I’ll post it up :)

[jamygolden]

No problem! If you need any more help, just ask. I’m just busy right now and I won’t be available until Monday – So good luck until then!

[Brightonmike]

No worries. You’ve given me more than enough time!

[Author]

Posts