javascript - 禁用提交表单错误

Question

我正在使用 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);但它什么也没做。

Answer 1

$('#submit-button').css('display', 'none');隐藏

$('#submit-button').prop('disabled', true);禁用

Answer 2

您可以为您的字段添加事件处理程序。

validate向插件验证的字段添加一个类，并在调用后添加以下脚本$('#homepage-contact').validate(rules);

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

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

fieldChanged();