jQuery .valid() 不工作？ （验证插件）

Question

我正在使用jQuery Validation Plugin，但我的代码没有按预期工作。我想要的是当我单击提交按钮时，程序将检查表单是否正确填写并包含一个 url，然后运行一个函数。在这种情况下，它总是alert('true)。

$(document).ready(function(){
    $('#button1').submit(function() {
        if($("#button1").valid()){
            alert('true');
        }
        else{
            alert('false');
        }
    });
});

不确定这是否相关，但我正在使用 Flask 和 WTForms：

表格：

class SVN_Path(Form):
    svn_url1=StringField('SVN Directory:',[validators.URL()])
    svn_url2=StringField('SVN Directory:',[validators.URL()])

HTML：

<form id="button1" action="{{ url_for('test4') }}"method="post" name="SVNPATHS">
    {{form1.hidden_tag()}}
    <br>
    <div class="svninput" id="input1">
        {{ form1.svn_url1.label }}
        {{ form1.svn_url1 }}
    </div>
    <input id="update" class="button" type="submit" name="updatepaths" value="Update">
    <div class="svninput" id="input2">
        {{ form1.svn_url2.label }}
        {{ form1.svn_url2 }}
    </div>
</form>

更新

    $('#button1').submit(function(){
        var is_valid = $(this).validate({
            rules: {
                svn_url1: {
                    required: true,
                    url: true
                },
                svn_url2: {
                    required: true,
                    url: true
                }
            }
        });
        if(is_valid){
            alert('true');
        }
        else{
            alert('false');
        }
    });
});

我尝试了 dirn 的建议，但即使两个字段都为空，这仍然返回 true。

Answer 1

你可以这样试试：

var form = $( "#button1" );
form.validate();
$( "#update" ).click(function() {
  alert( "Valid: " + form.valid() );
});

这将在单击按钮时验证表单，而不是在单击表单时。

Answer 2

您尚未设置任何验证规则。该插件将这两个字段都视为可选字符串。您可以通过多种方式进行更改。

<input type="url" name="svn_url1" required>

（请注意，您有时将其称为svn_url1，有时称为svn_url1s。）

最简单的方法是使用 WTForm 的URLField

from wtforms.fields.html5 import URLField
from wtforms.validators import wtforms.validators.DataRequired

class SVNPath(Form):
    svn_url1 = URLField(validators=[wtforms.validators.DataRequired()])

另一种方法是对表单对象使用validate 方法并将验证规则传递给它。

$('#button1').submit(function() {
  var is_valid = $(this).validate({
      rules: {
        svn_url1: {
          required: true,
          url: true
        }
      }
    });
});