jQuery验证器组-如何使用? [英] jquery validator group - how to use it?

问题描述

我有3个字段和按钮:

<input type="text" id="a" />
<input type="text" id="b" />
<input type="text" id="c" />
<input type="button" id="d" />
<label for="all_fields" class="error" style="display:none;">Please fill exactly one field</label>

我想使用jquery验证程序插件来验证仅一个字段填充了文本.最好的方法是什么?

解决方案

工作演示 for A / B / C案例: http://docs.jquery.com/Plugins/Validation

希望它会有所帮助:)

HTML

<form action="results.whatever" target="_blank" id="HULK">

    <div style="clear:both">
    <label for="a">A</label>
    <div style="float:right">
            <input name="a" type="text" class="at_least_one idleField"></div>
    </div>
    <div style="clear:both">
        <label for="b">B</label>
        <div style="float:right">
            <input name="b" type="text" class="at_least_one idleField">
        </div>
    </div>
    <div style="clear:both">
        <label for="c">C</label>
        <div style="float:right">
            <input name="c" 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>
​

代码

   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's 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');
  $("#HULK").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() { $("#HULK").valid() },
    onkeyup: function() { $("#HULK").valid() },

    rules: {
      // note: you can use variable to avoid repeating 
      // of the same code
      a: { 
        number: true,
        require_from_group: [1, ".at_least_one"]
      },
      b: {
        number: true,
        require_from_group: [1,".at_least_one"]
      },
      c: {
        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"
  });
});
​

I have 3 fields and button:

<input type="text" id="a" />
<input type="text" id="b" />
<input type="text" id="c" />
<input type="button" id="d" />
<label for="all_fields" class="error" style="display:none;">Please fill exactly one field</label>

I want to use jquery validator plugin in order to validate that exactly one field filled with text. What is the best way to do it?

解决方案

Working demo for A / B / C case: http://jsfiddle.net/hfLwB/

Behaviour: As long as one of the input field is set with nu,her value it will allow the calculation to happen, If all the 3 fields are empty it will thtourgh an error. You will also notice class .at_least_one and addMthod: require_from_group.

Anyhoo code should speak better.

Good link: http://docs.jquery.com/Plugins/Validation

Hope it helps :)

HTML

<form action="results.whatever" target="_blank" id="HULK">

    <div style="clear:both">
    <label for="a">A</label>
    <div style="float:right">
            <input name="a" type="text" class="at_least_one idleField"></div>
    </div>
    <div style="clear:both">
        <label for="b">B</label>
        <div style="float:right">
            <input name="b" type="text" class="at_least_one idleField">
        </div>
    </div>
    <div style="clear:both">
        <label for="c">C</label>
        <div style="float:right">
            <input name="c" 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>
​

Code

   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's 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');
  $("#HULK").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() { $("#HULK").valid() },
    onkeyup: function() { $("#HULK").valid() },

    rules: {
      // note: you can use variable to avoid repeating 
      // of the same code
      a: { 
        number: true,
        require_from_group: [1, ".at_least_one"]
      },
      b: {
        number: true,
        require_from_group: [1,".at_least_one"]
      },
      c: {
        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"
  });
});
​

这篇关于jQuery验证器组-如何使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！