0

jQuery Validation を使用しており、要件が満たされていることを確認する簡単なスクリプトがあります。フォームにエラーがある場合は送信ボタンを非表示にし、フォームにエラーがない場合は送信を表示したいと考えています。

私のフォームHTMLは以下です。

<form name="homepage-contact" id="homepage-contact" method="post" action="assets/forms/contact-form.php">
              <div class="control-group">
                <label class="control-label" for="inputName">Name</label>
                <div class="controls">
                  <input type="text" class="span4" id="inputName" name="name" placeholder="Name">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="inputEmail">Email</label>
                <div class="controls">
                  <input type="text" class="span4" id="inputEmail" name="email" placeholder="Email">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="inputContact">Message</label>
                <div class="controls">
                 <textarea id="inputContact" name="message" class="span4"></textarea>
                </div>
              </div>
              <div class="control-group">
                <div class="controls">
                  <button type="submit" id="submit" class="btn btn-success">Contact Us</button>
                </div>
              </div>
        </form>

そして、フォームを検証するための私の JS は次のようになります。

$(function validate() {

var rules = {
    rules: {
        name: {
            minlength: 2,
            maxlength: 50,
            required: true
        },
        email: {
            required: true, 
            email: true
        },
        message: {
            required: true
            minlength: 10, 
            maxlength: 500
    }
    }
};

$('#homepage-contact').validate(rules);

});

送信ボタンを非表示/表示するためにJSに何かを追加したいだけです。

を追加しようとしまし$('#submit-button').hide();たが、直後に:を追加$('#homepage-contact').validate(rules);しましたが、何もしませんでした。

4

2 に答える 2

0

フィールドのイベント ハンドラーを追加できます。

validateプラグインによって検証されるフィールドにクラスを追加し、呼び出し後に次のスクリプトを追加します$('#homepage-contact').validate(rules);

function fieldChanged() {
    $('#submit').toggle($('#homepage-contact').valid());
}

$('.validate').on('change', fieldChanged);

fieldChanged();
于 2013-06-14T10:43:27.160 に答える