jQuery validate breaks conditional fields

[Brightonmike]

If I use jQuery validate, the script breaks my conditional fields.

Both scripts are below. Any ideas why this is happening? I’ve gone through the DOM and I can’t find anything obvious.

[Brightonmike]

Can anybody help with this? :)

[Tcooper]

Hi Mike, it isn’t very clear what problem you are having – what are you doing, what do you expect to happen, what actually happens? Bonus points for an example or jsfiddle.

[Brightonmike]

I can’t get jsfiddle to play ball.

The code at the top is used for conditional fields. So unless the user selects a specific option from a dropdown, a field at the end of the form is hidden. Doesn’t that make sense?

The problem is, when I add my jQuery validation code, as above, the validation works but the conditional forms stop working.

You can see the page here: http://www.jetbookingdirect.com/?theme=jetbook2012

[Tcooper]

That’s much clearer, the problem is in your JS you are checking for a value of “single”, but your option has a value of “Single” – check for “Single” or change the option value to “single” and it should work.

Single

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

Nice work on the form btw, I like it :)

[Brightonmike]

Legendary, what a silly mistake. Thanks mate. And thanks for the compliment! :)

[mcguiver178]

Brighton, I know you had already solved the problem but I would go for a simpler Validation with Javascript/jquery. What I used to do was:

1. get the data from the form in a Variable:

var FirstName = $(‘#txtBox1’).val();

2. I validate with a simple if statement:

if(FirstName == ”){
alert(‘Yo dude! you forgot to write something here!’)
}

and do that all the way with the conditionals you want, you could do it inside a custom content box on top of the form too, and other things, I find it a really nice and custom way to validate data front-end wise. Hope it works for you :)

[Author]

Posts