Question

我正在尝试使用jquery验证。以下示例：http://docs.jquery.com/Plugins/Validation效果很好，我想用我的代码重现。但是我不确定在哪里打电话。

我所拥有的是生成的html表，当您单击任何行的“编辑”按钮时，它会打开一个表单。我想用jquery验证这个表单。我相信它有效但当我在表单上点击提交时，我隐藏了表单，所以我永远看不到验证工作......我想。

我用javascript生成表单，提交按钮如下所示：

var mysubmit = document.createElement("input");
mysubmit.type = "submit";
mysubmit.name = "Submit";
mysubmit.value = "Apply"
mysubmit.onclick = function() { 
   //return formSubmitactivecameras();
js("#EditCameraForm").validate();
    this.form.submit();
};
myform.appendChild(mysubmit);

这个信息不够，所以我在这个小提琴中有所有代码：http://jsfiddle.net/UtNaa/36/。但是，当您单击“编辑”按钮时，我似乎无法使用小提琴。这打开了一个我希望验证的表单。

我不确定验证是否真的有效。也许是这样，但是当您点击表单上的提交按钮时，表单会隐藏。小提琴再次无法显示表单，但它确实对我的网站有用。希望那里的代码至少会有所帮助。

Answer 1

基本上你需要通过添加

来调用每个元素

 myinput.className = "required"; // add this line

然后在应用验证之前首先附加所有元素

或添加规则

js("#EditCameraForm").validate();
        rules: {
            camera_name: {
                required: true,
                minlength: 50,
                maxlength: 10
            },
};

在这个例子中，它需要输入最多50个字符和最小值10

您还可以在验证之前使用addMethod添加自定义验证

$.validator.addMethod("alphanum", function(value, element) {
    return this.optional(element) || /^[a-z0-9]+$/i.test(value);
}, "This field must contain only letters and numbers.");

js("#EditCameraForm").validate();
        rules: {
            camera_name: {
                required: true,
                alphanum: true,
                minlength: 50,
                maxlength: 10
            },
};

然后当你点击提交按钮时提交表单但是不要把hide放在那里只是放入validators的提交处理程序

js("#EditCameraForm").validate();
    rules: {
        camera_name: {
            required: true,
            minlength: 50,
            maxlength: 10
        }
    },
    submitHandler: function() {
        // do stuff once form is valid but before it is sent
    }
};

以下是如何应用自定义消息的示例，这将在规则

之后进行

messages: {
    email: {
        required: 'Enter this!'
    }
}

l

Answer 2

问题是表单不知道表单字段应该包含什么。

再次查看文档和示例。显然，您可以使用类名和自定义属性来配置验证器。或者你可以使用$ .rule（）函数将规则添加到表单中。

例如，通过在名称输入中添加“必需”类来使相机字段名称成为必需。

var myinput = document.createElement("input");
myinput.name="camera_name";
myinput.value=cameraname;
myinput.id="CameraName";
myinput.className = "required"; // add this line
myform.appendChild(myinput);

此外，修改onClick处理程序

上的提交按钮

//submit changes button
var mysubmit = document.createElement("input");
mysubmit.type = "submit";
mysubmit.name = "Submit";
mysubmit.value = "Apply"
mysubmit.onclick = function() { 
    //return formSubmitactivecameras();
    js("#EditCameraForm").validate()
    //this.form.submit(); // This isn't needed, the form will be submitted when this function ends
};
myform.appendChild(mysubmit);

Answer 3

您必须将jsFiddle左侧的框架更改为“no wrap（head）”，您的JavaScript才能开始工作。这是改变的小提琴。 http://jsfiddle.net/UtNaa/39/

但是，您的代码无效，因为它缺少HTML代码中的元素。可能在添加代码的其他部分后，它可能会开始工作，如果不是，它将更容易调试。

Answer 4

尚未检查验证部分，因为已经回答了这个问题。但是我相信你可以在你的代码中使用一个小小的清理工具。

查看此重写方法：http://jsfiddle.net/UtNaa/40/

修正了按钮事件的错误：http://jsfiddle.net/UtNaa/42/

jquery验证位置

4 个答案: