Unable to get form to validate for one or other input field

Question

I am trying to get it so if user fills out at least one of inputs then form gets submitted.

I guess I'm not sure what this code: jQuery Validate - require at least one field in a group to be filled is doing well enough to get it to work for me.

Any help would be appreciated:

After i looked at the answer above I tried this:

I have this form:

<form id="myForm">
  <input class="fillone" id="bigform" name="message" type="text" required/>
  <input class="fillone" id="bigform" name="number" type="text" required/>
  <input type="submit" id="btnSubmit" />
</form>

and script:

if(!$(element).data('being_validated')) {
     var fields = $(selector, element.form);
     fields.data('being_validated', true);
     fields.valid();
     fields.data('being_validated', false);
   }
  return validOrNot;
  }, jQuery.format("Please fill at least {0} of these fields."));

  $.validator.addMethod("require_from_group", function(value, element, options) {
    var selector = options[1];
    var validOrNot = $(selector, element.form).filter(function() {
    return $(this).val();
  }).length >= options[0];

  $("#myForm").validate({
    groups: {
      message:  {require_from_group: [1,".fillone"]},
      number: {require_from_group: [1,".fillone"]},
  });

Also, I think `jQuery.validator.addMethod` should be at the top, since you're using in `$("#myForm")`. For example `alert(testVar); var testVar = 'this is after it is alerting.';` Although it still works, it's syntactically incorrect. — , Mar 15 '14 at 17:47
Thx, I wish it was a fix but at least its syntactically correct now. — , Mar 15 '14 at 17:53
Actually, my bad, the script should be arranged like this: http://jsfiddle.net/9ApsV/ This still doesn't fix it, but I thought I'd point that out, again. — , Mar 15 '14 at 21:15

Sparky · Answer 1 · 2014-03-16T17:20:43.857

Your entire script is jumbled nonsense and filled with syntax errors.... a compilation of disconnected bits and pieces. It's exactly like you cut require_from_group into two chunks of code and swapped those two pieces after deleting some things...

if(!$(element).data('being_validated')) {  // this part comes from INSIDE 'require_from_group'
     var fields = $(selector, element.form);
     fields.data('being_validated', true);
     fields.valid();
     fields.data('being_validated', false);
   }
  return validOrNot;
  // this line should be the last line of 'addMethod', NOT after a comma following a conditional
  }, jQuery.format("Please fill at least {0} of these fields."));  

  // this is start of 'addMethod" but its guts are just above    
  $.validator.addMethod("require_from_group", function(value, element, options) {
    var selector = options[1];
    var validOrNot = $(selector, element.form).filter(function() {
    return $(this).val();
  }).length >= options[0];  // 'addMethod' can't end here!

  $("#myForm").validate({
    // this is all wrong...
    groups: {
      message:  {require_from_group: [1,".fillone"]},
      number: {require_from_group: [1,".fillone"]},
  });

Forget about manually including required_from_group. Just include the latest additional-methods.js file which already has a working required_from_group method inside.

Now let's talk about your implementation of the .validate() method...

$("#myForm").validate({
    groups: {
          message:  {require_from_group: [1,".fillone"]},
          number: {require_from_group: [1,".fillone"]},
});

and your HTML:

<input class="fillone" id="bigform" name="message" type="text" required/>
<input class="fillone" id="bigform" name="number" type="text" required/>

Problems:

1) The groups option is only used for grouping error messages together, not for assigning rules. It only contains an arbitrary name and a space separated list of field names whose messages are to be grouped together. Don't confuse this option with the require_from_group rule. Although they can be used together, they are not related to each other. See documentation.

groups: {  // group some messages together
    myGroup:  "message number"  // names of fields to group their messages
} // <- you were also missing this closing brace

2) Whenever rules are declared within the .validate() method, they must be declared by using the rules option. I don't see the rules option within your .validate().

rules: {  // declare the rules
    message: {  // name of field
        require_from_group: [1,".fillone"]
    },
    number: {  // name of field
        require_from_group: [1,".fillone"]
    }
}

3) You've placed the required attribute inside both of your input elements. This tells the plugin that both fields have the required rule. If you only want one or the other required, then you also can't make them both required. require_from_group[1, ..] means that at least one from the group is required. Remove the required attribute from the input elements if you really want to use the require_from_group rule.

<input class="fillone" id="bigform" name="message" type="text" />
<input class="fillone" id="bigform" name="number" type="text" />

$("#myForm").validate({  // initialize the plugin
    rules: {  // declare the rules
        message: {  // name of field
            require_from_group: [1,".fillone"]
        },
        number: {  // name of field
            require_from_group: [1,".fillone"]
        }
    },
    groups: {  // group some messages together
        myGroup:  "message number"  // names of fields to group their messages
    }
});

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

Unable to get form to validate for one or other input field

1 Answers1