4

Twitterブートストラップにフォームがあります：

<div class="form-div">
<form id="fvujq-form1" method="post" action="">
                    <div class="control-group name">
                    <fieldset>
                        <label>Name *</label>
                        <input type="text" name="name">
                    </fieldset>
                    </div>
                    <div class="control-group email">
                    <fieldset>
                        <label>E-Mail *</label>
                        <input type="text" name="email">
                    </fieldset>
                    </div>
                    <div class="control-group comment">
                    <fieldset>
                        <label>Your comment *</label>
                        <textarea name="comment"></textarea>
                    </fieldset>
                    </div>
              <button class="btn btn-primary">Submit</button> 
            </form>
        </div>

そして、これは私がbassistance Validateプラグインでそれを検証する方法です:

$(document).ready(function() {
        $("#fvujq-form1").validate({
            submitHandler:function(form) {
                SubmittingForm();
            },
            success: function(label) {
                 label.html("&#10004;").addClass("valid");
               },
            onfocusout: function(element) { $(element).valid(); },
            focusInvalid: false,
            highlight: function(element, errorClass, validClass) {
                 $('.form-div').find('.control-group' + element.id).addClass('error');
              },
              unhighlight: function(element, errorClass, validClass) {
                 $('.form-div').find('.control-group' + element.id).removeClass('error');
              },
            errorClass: "help-inline",
            errorElement: "strong"

現在検証されているdivに.errorを追加したいのですが、このコードは、検証されたものだけでなく、すべての.control-groupの出現にクラスを追加します:(

thx 4 年間のヘルプ。

4

1 に答える 1

5

JSFiddler の例

これは、各フィールドを離れるとき、または送信ボタンを押すときに検証され、ルールを満たすすべてのフィールドでエラーが表示されます。

HTML

<form action="" id="fvujq-form1" class="form-horizontal">
<fieldset>  
    <div class="control-group">
      <label class="control-label" for="name">Your Name</label>
      <div class="controls">
        <input type="text" class="input-xlarge" name="name" id="name">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="email">Email Address</label>
      <div class="controls">
        <input type="text" class="input-xlarge" name="email" id="email">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="comment">Comment</label>
      <div class="controls">
        <input type="text" class="input-xlarge" name="comment" id="comment">
      </div>
    </div>    
    <div class="form-actions">
      <button type="submit" class="btn btn-primary">Submit</button>

    </div>
  </fieldset>
</form>

Javascript

$(document).ready(function(){

 $('#fvujq-form1').validate(
 {
  rules: {
    name: {
      minlength: 2,
      required: true
    },
    email: {
      required: true,
      email: true
    },
    comment: {
      minlength: 2,
      required: true
    },
  },
  highlight: function(element) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
  },
  success: function(element) {
    element
    .text('OK!').addClass('valid')
    .closest('.control-group').removeClass('error').addClass('success');
  }
 });
});
于 2013-03-24T19:41:54.133 に答える