使用 javascript 在单个页面上进行多个表单电子邮件验证答案

【问题标题】：Multiple Forms Email validation on a single page using javascript使用 javascript 在单个页面上进行多个表单电子邮件验证
【发布时间】：2014-08-26 08:21:18
【问题描述】：

我正在开发一个 Wordpress 小部件插件，它可以在小部件中插入任意数量的电子邮件输入表单。

我正在使用以下代码来验证电子邮件字段

function validateForm(form) {
var x = document.forms["twb_form"]["email"].value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");

        if (x == null || x == "" || atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length) {

        document.getElementById('errorMSG').innerHTML = 'Please enter a valid email address';                   

        return false;                   
        }
}

问题是验证错误总是显示在页面上的第一个表单上，而不管其他表单...这是因为 div #errorMSG

我知道这可以使用某种 PHP 技巧来解决，但我想不通。

页面上的每个表单都应用了一个单独的 ID ... widget-id-1、widget-id-2 等等...

如何将每条验证消息与一个 widget-id 相关联？

【问题讨论】：

标签： javascript wordpress forms validation widget

【解决方案1】：

你试过下面的代码吗？

    document.getElementById('errorMSG').innerHTML ='';
    if (x == null || x == "" || atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length) {

    document.getElementById('errorMSG').innerHTML = 'Please enter a valid email address';                   

    return false;                   
    }

【讨论】：

【解决方案2】：

 function GetElementInsideContainer(containerID, childID) {  
    var elm = {};  
    var elms = document.getElementById(containerID).getElementsByTagName("*");  
    for (var i = 0; i < elms.length; i++) {  
        if (elms[i].id === childID) {  
            elm = elms[i];  
            break;  
        }
    }
    return elm;
}

在你的函数中

var elem= GetElementInsideContainer(widgetID, 'errorMSG');
elem.innerHTML = 'Please enter a valid email address';

找到它here

【讨论】：