Question

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

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

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相关联？

Answer 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;                   
    }

Answer 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

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

2 个答案: