Can'；t使用规则、消息和方法进行jquery验证

我不明白为什么form2验证失败，但form1通过了验证（使用jQuery验证插件）。如何使用下面的代码使form1也无法通过验证

HTML

<form id="form1" method="get" action="">
    <input type="text" id="viewName1">
     <h3></h3>
</form>

<form id="form2" method="get" action="">
    <input type="text" id="viewName2" required>
     <h3></h3>
</form>

小提琴

---

它不起作用，因为您的输入元素没有

名称

属性。这是插件的一个要求

:

“输入元素的

name

属性是“必需”的 没有它，验证插件就无法工作。”

$（'form1'）。验证({
规则：{
viewName:'必需'//请不要将更正后的代码编辑到您的问题中。问题和答案已经说明了问题本身。谢谢！
$('#form1').validate({
    rules: {
        viewName: 'required'
    },
    messages: {
        viewName: '* view name is required'
    },
    submitHandler: function () {
        $('#form1 h3').text('Form1 valid');
    },
    invalidHandler: function (event, validator) {
        $('#form1 h3').text('Form1 invalid');
    }
});
$('#form1').submit();

$('#form2').validate({
    submitHandler: function () {
        $('#form1 h3').text('Form1 valid');
    },
    invalidHandler: function (event, validator) {
        $('#form1 h3').text('Form1 invalid');
    }
});
$('#form2').submit();

$('#form1').validate({
    rules: {
        viewName: 'required' // <-- "viewName" is the 'name' attribute, not id
    },
    messages: {
        viewName: '* view name is required'  // <-- "viewName" is the 'name' attribute, not id
    },
    submitHandler: function () {
        $('#form1 h3').text('Form1 valid');
    },
    invalidHandler: function (event, validator) {
        $('#form1 h3').text('Form1 invalid');
    }
});