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();

禁用表单错误提交

2 个答案: