JQuery validation: if one input is entered, others should become required
I have a form with multiple lines of 4 input fields, it looks like this:
<tr>
<td><input name="company01" id="company01" /></td>
<td><input name="description01" id="description01" /></td>
<td><input name="costs01" id="costs01" class="sum" /></td>
<td><input name="file01" id="file01" /></td>
</tr>
<tr>
<td><input name="company02" id="company02" /></td>
<td><input name="description02" id="description02" /></td>
<td><input name="costs02" class="sum" id="costs02" /></td>
<td><input name="file02" id="file02" /></td>
</tr>
Now, when a user enters one of the line inputs (such as a cost field), it should be required to enter the company and handle (but not an attachment).
Uploading files is never required. However, the user must complete at least the line company, description, and costs.
Can anyone tell me how I can check if at least one line is complete? And how can I check if the other 2 have completed with the jQuery validation plugin?
source to share
can be accomplished with the required method and dependent expressions
....
rules : {
company01 : { required : "#company02:blank" },
description01 : { required : "#company01:filled" },
costs01: { required : "#company01:filled" },
// now company 2
company02 : { required : "#company01:blank" },
description02 : { required : "#company02:filled" },
costs02: { required : "#company02:filled" }
}
....
source to share
You can use an "expression-dependency" to make the rule for one field depend on the state of another.
Here's a working example ...
Working demo: http://jsfiddle.net/GMK5V/
JQuery
$(document).ready(function () {
$('#myform').validate({ // initialize the plugin
// other options,
rules: {
field1: {
required: true
},
field2: {
required: '#field1:filled'
}
}
});
});
HTML (also added id
to each input
):
<form id="myform">
<input type="text" name="field1" id="field1" />
<input type="text" name="field2" id="field2" />
</form>
source to share
By default jQuery validation does not check disabled inputs. While dependency expressions do exactly what you ask in the question, I think it's worth asking yourself if your form makes sense of describing without a company name. Depending on the user experience you want to use, it is best to start with the description, costs and downloads of files disabled, clearly informing the user that these fields cannot be used on their own. Then you mark them as needed in the jQuery validation rules and when enabled they are required.
The trick is to include them when the company name is added. I would do it like this:
Markup
<!-- add a class to the row for ease of dom traversal -->
<tr class="company-row">
<!-- add a class to the company name for ease of selection -->
<td><input class="company-name" name="company01" id="company01" /></td>
<td><input name="description01" id="description01" /></td>
<td><input name="costs01" id="costs01" class="sum" /></td>
<td><input name="file01" id="file01" /></td>
</tr>
JavaScript
$(document).ready(function() {
$('.company-name').on('keyup', function() {
var $this = $(this);
if($this.val() != '') {
$this.parents('.company-row').find('input').removeAttr('disabled');
} else {
$this.parents('.company-row').find('input').not('.company-name').attr('disabled', 'disabled');
}
});
)}
This should do the trick, but admittedly I haven't tested anything I just wrote. You are probably facing a situation where someone abandoned the company description, tried to submit, received a confirmation message for that field, deleted the company name, and the verification message did not disappear (and they may not be able to submit the form). I forgot how to fix this now, but the general approach is to call .resetform()
on the entire validator, which will remove all validation messages. It might work if you call it submit.
source to share