ansaurus

Question

Conditional Validation using JQuery Validation Plugin

Answer 1

A:

On your <textarea> elements, add a dependency expression for required, for example for question 1, do this:

validate="required:'input[name=Question1][value=Yes]:checked'"

This says if $('input[name=Question1][value=Yes]:checked').length > 0 then the field is required, so if Yes is checked, it's required :)

You can see a working demo here

Nick Craver 2010-05-19 00:51:19

Thanks for your answer. I've added the code into the <textarea> elements but when I select Yes it still lets me submit the form without entering any text into the Details field. Any ideas what I'm doing wrong?

Steve Kemp 2010-05-19 01:13:01

@Steve - Here's your code with what I have above added and working, make sure the quotes and all are correct: http://jsfiddle.net/H2YLp/

Nick Craver 2010-05-19 01:21:11

OK thanks that's great I've got it working now. I appreciate your help, didn't realise it would be quite a simple change to implement this.This is really a bonus question but I would also like to make the label for the textarea input field change colour to red once the user clicks Yes to indicate that this is now a required field. Clicking No would remain black. So if the user clicks Yes for Question 1 the: <strong>Details:</strong> for Question 1 would then change colour to red. Any ideas?

Steve Kemp 2010-05-19 02:47:20

@Steve - That would be a `.change()` handler on those elements, here's an example, note how I change the labels...this should be how your `<label>` elements relate to your `<input>` elements :) http://jsfiddle.net/8J3K6/

Nick Craver 2010-05-19 03:08:08

Thanks Nick - that changes the label for "Yes" in the radio button input. What I want to do is change the label for "Details" if the corresponding answer is "Yes". So user clicks "Yes" to Question 1 and the Details label changes to red.Also selecting "Yes" for an answer and trying to Submit displays the error under the Details textarea as expected. However if you change your answer to "No" it doesn't remove the error label under the textarea field - do you know if there is a way to remove it when "No" is clicked if it was displayed?

Steve Kemp 2010-05-19 14:20:14

Answer 2

A:

You can do something like this:

$("#editRecord").validate({
    rules: {
        'Details1': {
            required: function() {
                return $('input[name=Question1]').val() == 'yes';
            }
        }
        'Details2': {
            required: function() {
                return $('input[name=Question2]').val() == 'yes';
            }
        }
    }
});

PetersenDidIt 2010-05-19 00:58:13

Javascript is case sensitive, especially on strings ;)

Nick Craver 2010-05-19 01:14:21

OK thanks that's great I've got it working now. This is really a bonus question but I would also like to make the label for the textarea input field change colour to red once the user clicks Yes to indicate that this is now a required field. Clicking No would remain black.So if the user clicks Yes for Question 1 the: <strong>Details:</strong>for Question 1 would then change colour to red. Any ideas?

Steve Kemp 2010-05-19 01:57:41

ansaurus

tags:

views:

answers:

Conditional Validation using JQuery Validation Plugin

related questions