Question

我在jQuery中为我的表单编写了验证代码。一切似乎都是正确的，但它不起作用。救救我！

HTML表格：

<form role="form" name="form1" id="form1">
    <div class="form-group">
        <label for="usr">Contact Name</label>
        <input type="text" name="usr" class="form-control" id="usr" placeholder="Full Name">
    </div>
    <div class="form-group">
        <label for="pwd">Company Name</label>
        <input type="text" class="form-control" id="pwd" placeholder="Company Name">
    </div>
    <div class="form-group">
        <label for="eml">Email</label>
        <input type="email" class="form-control" id="eml" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="phn">Contact Number</label>
        <input type="number" class="form-control" id="phn" placeholder="98689-98689">
    </div>
    <div class="form-group">
        <label for="comment">Remarks</label>
        <textarea class="form-control" rows="3" id="comment"></textarea>
    </div>
    <button id="submtbtn" style="height:30px ; width:60px;   padding: 5px 5px;" type="button" class="btn btn-info" onClick="AddNew(); this.form.reset()">Insert</button>
    <button style="height:30px ; width:60px;   padding: 5px 5px;" type="button" class="btn btn-info" onClick="this.form.reset()">Clear</button>
    <button id="cnclbtn" style="height:30px ; width:60px;   padding: 5px 5px;   background-color: #f1f1f1; " type="button" class="btn btn-default">Cancel</button>
</form>

以下是验证脚本：

$(document).ready(function () {
    $("#form1").validate({
        rules: {
            usr: "required",
            pwd: "required",
            eml: {
                required: true,
                email: true
            },
            phn: {
                required: true,
                minlength: 10
            }
        },
        messages: {
            usr: "Please enter your first name",
            pwd: "Please enter your last name",
            eml: {
                required: "Please provide Email address ",
                email: "Please enter valid Email address"
            },
            phn: {
                required: "Please provide a Phone Number",
                minlength: "Your Phone Number must be 10 digits"
            }
        }
    });

    $("#submtbtn").click(function () {
        $("#form1").valid();
    });
});

请指出错误。谢谢。

JSFiddle https://jsfiddle.net/cherry1993/vwo0r0h6/

Answer 1

在your jsFiddle中，从JavaScript窗格中删除<script>和</script>标记，并包含jQuery和jQuery Validate插件后，它开始工作......但仅适用于{ {1}}字段。

https://jsfiddle.net/vwo0r0h6/2/

它不适用于任何其他字段，因为您忘记在这些输入元素上包含usr属性。此插件仅使用name属性而非name来跟踪表单输入。

id

工作演示：https://jsfiddle.net/vwo0r0h6/3/

<强>加成：

您不必担心自定义消息中的值与规则的参数匹配。只需在自定义消息中使用参数的占位符<input type="text" class="form-control" name="pwd" placeholder="Company Name">，即可动态输入其值。请参阅上面的工作演示。

{0}

使用Jquery onclick按钮进行表单验证

1 个答案: