Geek asks and answers

To check the jquery form, one of the input groups is required. And the input is required to be an integer

I am making a form that requires filling at least one field AND all inputs must be integer or decimal. I am using jquery validation plugin to validate. I reworked something I found here that seems to partially do the trick. right now i have:

<SCRIPT>   
jQuery.validator.addMethod("require_from_group", function(value, element, options) {
    var numberRequired = options[0];
    var selector = options[1];
    var validOrNot = $(selector, element.form).filter(function() {
         // Each field is kept if it has a value
         return $(this).val();
         // Set to true if there are enough, else to false
      }).length >= numberRequired;
    if(!$(element).data('being_validated')) {
         var fields = $(selector, element.form);
         fields.data('being_validated', true);
         fields.valid();
         fields.data('being_validated', false);
    }
    return validOrNot;
    // {0} below is the 0th item in the options field
    }, jQuery.format("Please fill out at least {0} of these fields."));

$(document).ready(function(){
    var container = $('#errorContainer');
    $("#FORMMM").validate(  {
        rules: {
            groceries: {digits: true,require_from_group: [1,".at_least_one"]},
            gas: {digits: true,require_from_group: [1,".at_least_one"]},
            hotels: {digits: true,require_from_group: [1,".at_least_one"]}

        },
        success: function(label) {  
                label.html(" ").addClass("checked"); 
        },
        errorContainer: container,
            errorLabelContainer: $("ol", container),
            wrapper: 'li',
            meta: "validate"
    });
});
</SCRIPT>

The HTML below, in my actual form there are 15 input fields, I just condensed it here:

<form action="results.php" target="_blank" id="FORMMM">

    <div style="clear:both">
    <label for="groceries">Groceries</label>
    <div style="float:right">
            $<input name="groceries" type="text" class="at_least_one idleField"></div>
    </div>
    <div style="clear:both">
        <label for="gas">Gas</label>
        <div style="float:right">
            $<input name="gas" type="text" class="at_least_one idleField">
        </div>
    </div>
    <div style="clear:both">
        <label for="hotels">Hotels</label>
        <div style="float:right">
            $<input name="hotels" type="text" class="at_least_one idleField">
        </div>
    </div>
    <div id="button">
        <input name="" type="submit" value="Calculate" class="calc_button" style="cursor:hand">
    </div>
    </form>
<div id="errorContainer">
    <h4>errors</h4>
    <ol>
    </ol>
</div>

There are currently two problems with validation. If all fields remain empty, I get 3 error messages when I need only one!

, , " " , , 1 .

? , jquery, , . , ?

+3
2

, . . . .

jQuery.validator.addMethod(
    "require_from_group", function(value, element, options) {
  var numberRequired = options[0];
  var selector = options[1];
  var fields = $(selector, element.form);
  var filled_fields = fields.filter(function() {
    // it more clear to compare with empty string
    return $(this).val() != ""; 
  });
  var empty_fields = fields.not(filled_fields);
  // we will mark only first empty field as invalid
  if (filled_fields.length < numberRequired && empty_fields[0] == element) {
    return false;
  }
  return true;
// {0} below is the 0th item in the options field
}, jQuery.format("Please fill out at least {0} of these fields."));

$(document).ready(function(){
  var container = $('#errorContainer');
  $("#FORMMM").validate(  {

    // We must to force validation of entire form because
    // when we remove value from 2-nd field 
    // the 1-st field becomes invalid.
    onfocusout: function() { $("#FORMMM").valid() },
    onkeyup: function() { $("#FORMMM").valid() },

    rules: {
      // note: you can use variable to avoid repeating 
      // of the same code
      groceries: { 
        number: true,
        require_from_group: [1, ".at_least_one"]
      },
      gas: {
        number: true,
        require_from_group: [1,".at_least_one"]
      },
      hotels: {
        number: true,
        require_from_group: [1,".at_least_one"]
      }
    },
    success: function(label) {  
      label.html(" ").addClass("checked"); 
    },
    errorContainer: container,
    errorLabelContainer: $("ol", container),
    wrapper: 'li',
    meta: "validate"
  });
});
+4

:

  • - , .
  • , .

: http://jsfiddle.net/jclark/NR29t/1/; , , , .

, # 1. , , . . , require_from_group. , :

if(!$(element).data('being_validated')) {
     var fields = $(selector, element.form);
     fields.data('being_validated', true);
     fields.valid();
     fields.data('being_validated', false);
}

, , , , , , , , submit. ? , -, . "be_validated" ( , , ), , . , . , , , , , , -- ; , .

98% , . , . . :

http://jsfiddle.net/jclark/NR29t/2/

. , , , - . , Validator groups, , . . :

http://jsfiddle.net/jclark/NR29t/3/

, . : " " , . , Validator; . : jquery validate - . , 3 , , 1 ( ), , .

, . SO , , , . :

http://jsfiddle.net/jclark/NR29t/4/

:

jQuery.validator.addMethod("digits_for_group", function(value, element, selector) {
    var validOrNot = $(selector, element.form).filter(function() {
         // Each field is kept if it has a value
         return $(this).val().search(/[^0-9]/) != -1;
         // Set to true if there are enough, else to false
      }).length == $(selector, element.form).length;
    return validOrNot;

}, jQuery.format("Please enter only digits"));

, ; ; , .

, .

+1

More articles:


All Articles