Question

这里的新开发者。我试图用jquery验证几个表单，但我似乎无法让它工作。按下“提交”按钮时页面不响应。如果有人知道为什么以下代码不起作用我会非常感激：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

</script>
</head>
<body>

<h3>Login</h3>

<form>
<div class="form-group">
    <label class="control-label" for="firstname">First Name:</label>
    <div class="input-group">
        <input class="form-control" placeholder="First Name" name="firstname" type="text" />
    </div>
</div>

<div class="form-group">
    <label class="control-label" for="lastname">Last Name:</label>
    <div class="input-group">
        <input class="form-control" placeholder="Last Name" name="lastname" type="text" />
    </div>
</div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

</body>
</html>

谢谢！

Answer 1

经过测试和工作！

1。您忘记在当前 jsFiddle / HTML 中加入jquery.validate.js插件，以便使用{{1} }，您可以从官方 CDN ：

添加它

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js （您也可以从以下网址下载：http://jqueryvalidation.org - 下载部分）。

请不要忘记检查浏览器$('form').validate(..)，因为console很明显：

未捕获TypeError：对象[object Object]没有方法＆＃39;验证＆＃39;

2。对于那些告诉您使用error且因为您正在使用 bootstrap 的人（我知道它，因为你在当前的 jsFiddle 中导入了 bootstrap.min.js 和 bootstrap.min.css 。建议尽可能使用<input type="submit" />代码 以确保匹配跨浏览器呈现 。请阅读：http://getbootstrap.com/css/#buttons-tags并保留 HTML 。

您的 jsFiddle 现在正在使用，请查看。

现场演示： http://jsfiddle.net/oscarj24/vck4F/

Answer 2

您的表单提交应该是<input>元素，而不是<button>元素。

请参阅http://www.w3schools.com/tags/tag_input.asp

Jquery表格验证难度

2 个答案:

经过测试和工作！