JQuery Validator, make any field required

Question

I try to make sure that the user is in 1 of 2 fields: "ExactOrderSize" or "ApproOrderSize".

<p>Exact size of your order (# of items)</p> <input id="ExactOrderSize" type="text" name="ExactOrderSize"> <p>Approximate size of your order</p> <select id="approxOrderSize" name="approxOrderSize" > <option value="" selected="selected"></option> <option value="0">0-35</option> <option value="35">35-50</option> <option value="50">50-100</option> </select> 

To do this, I use the help of jQuery Validator. Everything works well with it, with the exception of this custom validation rule, which does nothing.

 $('#quoteform').validate({ rules: { FirstName: { required: true }, LastName: { required: true }, approxOrderSize: { required: function() { if($('#ExactOrderSize').val()=="") return true; else return false; } }, DateNeededBy: { required: true } } }); 

My idea was to basically run a function that, if the #ExactOrderSize field #ExactOrderSize not populated, required the #approxOrderSize field. A.K.A. set required = true

What we found from StackOverflow's answers is that the problems lie in the fact that these two fields are potentially hidden. When the page is first loaded, neither #ExactOrderSize nor #approxOrderSize are initially displayed.

They must click one of these two buttons to display this field:

Depending on the button selected, the slide animation shows the corresponding field.

Yes → Shows the #ExactOrderSize field

No → Shows the #approxOrderSize field

Although it would be a nice user interface, it seems to cause problems with validation messages that may be displayed, making jQuery validation impossible.

As a solution, I tried:

 $('#quoteform').submit(function() { $('#not-exact').show(); $('#yes-exact').show(); }); 

This way, all fields will be displayed after the form is submitted ... but it still does not work.

PS The actual page is HERE if you want to look at it.

Answer 1

I try to make sure that the user is in 1 of 2 fields

There is already a rule built into this plugin called require_from_group that does just that.

• Include the additional-methods.js file to get this rule.

• Add a class to both of these fields, ExactOrderSize and approxOrderSize . Something like ordersize .

• Declare a rule inside the .validate() method, like this ...

   rules: { ExactOrderSize: { require_from_group: [1, '.ordersize'] }, approxOrderSize: { require_from_group: [1, '.ordersize'] }, // your other fields/rules }, 

• Use the groups parameter to provide only one error message for both of these fields.

   groups: { ordersize: "ExactOrderSize approxOrderSize" }, 

• Use the errorPlacement parameter to place the error message in a position that makes more sense for these two fields.

   errorPlacement: function (error, element) { if ($(element).hasClass("ordersize")) { error.insertBefore(element.prev('p')); // custom error placement } else { error.insertAfter(element); // default error placement } } 

• NOTE The plugin ignores all hidden fields by default. To disable this function, simply set the ignore parameter to [] and nothing will be ignored. Then you can simply show / hide input fields based on some custom event handlers.

Working DEMO: http://jsfiddle.net/b0qe6Ljg/

Answer 2

JQuery Validator rules apply to elements with the corresponding name attribute, not the corresponding id attribute. Try the following:

 OrderRange: { required: function() { if($('#exactOrderSize').val()=="") return true; else return false; } } 

Answer 3

Playing firebug with this a bit, I think I have a solution. When the user submits the form and performs a check before you return true or false for confirmation for approxOrderSize , we must show the correct field and hide the other. For example, if the user did not enter anything in the ExactOrderSize field when they submit the form, the validator for approxOrderSize checks if ExactOrderSize value. If it does not matter, hide this field and show approxOrderSize , then return true .

 approxOrderSize: { required: function() { if($('#ExactOrderSize').val()=="") $("#NoExact").trigger("click"); return true; else $("#YesExact").trigger("click"); return false; } } 

At least in my experiment, this works because it shows the field that is now needed and shows a validation message for that field.

Answer 4

I think this will work for you. Here I made a function call to submit a form that validates one of two elements.

 function validateMyForm() { var a = document.getElementById('exsize').value.length; var b = document.getElementById('opt').value.length; if (a == 0 && b == 0) { alert("Please fill either of the Fields"); } else { //success } } 

 <form onsubmit='return validateMyForm()'> <table> <tr> <td> <input type="text" placeholder="Exact size of order" id="exsize" /> </td> </tr> <tr> <td> <select id="opt"> <option value="" disabled selected>Select Size</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> </td> </tr> <tr> <td> <input type="submit" value="submit" /> </td> </tr> </table> </form>