多个表单中的Jquery验证错误

Jquery validation error in multiple forms

本文关键字:Jquery 验证 错误 表单      更新时间:2023-09-26

我在同一个页面中有两个表单。jquery。验证插件正在动态加载。由于它是动态加载的,因此在用户单击提交按钮时创建验证规则。验证似乎在第一个表单(表单id = form)上工作得很好,但在第二个表单(表单id = #form1)上不起作用。

我得到以下错误:this[0] is undefined。这个问题有一些解决办法。但是解决方案不工作,因为我的脚本是动态加载的。

另外,大部分的脚本是纯javascript,因为我已经提供了支持几乎所有的浏览器,我没有控制表单元素的名称。如何进行第二表单验证?谢谢。

<form id="form">
    <input type="text" name="Please%20provide%20name." />
    <input type="text" name="Please%20provide%20email." />
    <input type="text" name="%50%6C%65%61%73%65%20%70%72%6F%76%69%64%65%20%70%68%6F%6E%65%20%6E%75%6D%62%65%72%2E" data-parsley-required />
    <input type="submit" value="Submit" />
</form>
<form id="form1">
    <input type="text" name="name" />
    <input type="text" name="email" />
    <input type="text" name="phone" />
    <input type="submit" value="Submit" />
</form>
"use strict";
document.addEventListener("DOMContentLoaded", function() {
    // on load
    var forms_count = document.forms.length,
        i = 0;
    // find all forms in the page
    for (i; i < forms_count; i++) {
        // for each form
        var form = document.forms[i];
        if (form.addEventListener) {
            // add submit handler to validate
            form.addEventListener("submit", validateForm, false); //Modern browsers
        } else if (form.attachEvent) {
            form.attachEvent('onsubmit', validateForm); //Old IE < 9
        }
    }
    // add scripts
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js");
    document.head.appendChild(script);
    // add validation rules
    validationClasses();
});
function validationClasses() {
    var forms_count = document.forms.length,
        i = 0;
    // find all forms in the page
    for (i; i < forms_count; i++) {
        // for each form
        var form = document.forms[i];
        // get form elements
        var elements = document.getElementById(form.id).elements;
        for (var element of elements) {
            // for each element, check name field and add appropriate validation class.
            var decode_name = decodeURIComponent(element.name);
            if (decode_name.toLowerCase().match(/(name|first name)/)) {
                // matching for name field.
                element.className += " valid_name";
            }
            if (decode_name.toLowerCase().match(/(email|email address)/)) {
                // matching for email field.
                element.className += " valid_email";
            }
            if (decode_name.toLowerCase().match(/(phone|phone number)/)) {
                // matching for phone field.
                element.className += " valid_phone";
            }
        }
    }
}
function validationJQRules() {
    // custom rules
    $.validator.addMethod("mobilenumber", function(value, element) {
        return this.optional(element) || /^[0-9-+'s]+$/.test(value);
    }, "Invalid Number");
    // Define validate form rules in jquery validate
    jQuery.validator.addClassRules("valid_name", {
        required: true,
    });
    jQuery.validator.addClassRules("valid_email", {
        required: true,
        email: true
    });
    jQuery.validator.addClassRules("valid_phone", {
        required: true,
        mobilenumber: true
    });
}
function validateForm(event) {
    validationJQRules();
    var form = this,
        valid = false;
    if (!valid) {
        // stop further execution of the event if not valid.
        event.preventDefault();
        event.stopPropagation();
        event.stopImmediatePropagation();
    } else {
        console.log("proceed with form submit.");
    }
    console.log(form.id);
    $(form.id).valid();
    console.log($(form.id).valid());
};

同样,对于使用注入的验证脚本执行验证的任何其他替代方法,我们都非常赞赏。

$(form.id).valid()可能存在问题。使用

$("#" + form.id).valid();
console.log($("#" + form.id).valid());