Question

在网站上使用一些问题和答案我已经取得了一些进展，将一些客户端javascript组合在一起以捕获空的必填字段和不完整的数据（例如，电话号码为999等）。它遍历表单上的所有字段，并检测空字段，但现在我想在页面上显示一条警告消息，当我开始添加该代码时，它会在第一个空字段错误后停止。

function listFields() {
var errCount = 0;
var notEmpty = /^\s*$/;  // Match all whitespace

var frm = document.forms.order_address;
for (i=0; i < frm.elements.length; i++) {
    var fieldType = frm.elements[i].type;
    if (fieldType != "hidden" && fieldType != "submit") { //Ignore submit button & hidden fields
        var fieldClass = frm.elements[i].className;
        if (fieldClass == "required") {
            if(notEmpty.test(frm.elements[i].value)) {
                errCount = errCount + 1;
                alert("Error: field: " + frm.elements[i].name + ", cannot be empty (" + errCount + " errors)");
                var errItem = document.getElementById(frm.elements[i].name + "Fail");
                errItem.innerHTML = "Field cannot be empty";
            } else { 
                // Not empty, but now check what they typed into field (Phone number/ email) 
                alert("Mandatory field: " + frm.elements[i].name + ", value: " + frm.elements[i].value + " OK");
            }
  //         alert("Mandatory field: " + frm.elements[i].name + ", value: " + frm.elements[i].value + " (" + fieldType + " - " + fieldClass + ")");
        } else {
  //          alert("Field: " + frm.elements[i].name + ", value: " + frm.elements[i].value + " (" + fieldType + " - " + fieldClass + ")");
        }
    }
}

if(errCount > 0) {
    alert("Please correct the " + errCount + " error(s) then resubmit the page");
} else {
    alert("Form is OK");
    }
}
//function hideErrorField(id, value) {
//    var errItem = document.getElementById(id);
//    errItem.value = value;
//    errItem.style.display = '';
//}

这是缩减html表单;姓名，姓氏，账单电话号码和电子邮件地址是强制性的。标题和手机可选。

<a href="#" onclick="hello();">Hello</a>&nbsp;&nbsp;<a href="#" onclick="listFields();">Check fields</a>
<table border="1"><tr class="top"><td>Order No: 1408001</td><td colspan="3"></td></tr>
<form name="order_address" method="post" action="/winecellar.nsf/(startCheckout)" target="_self"><input type="hidden" name="total" value="461.77" />
<input type="hidden" name="shipping" value="30.00">
<tr><td width="24%">Title  <span class="fieldnote">(e.g Dr, Ms, Mrs)</span>
<td><input name="title" type="text" size="10" tabindex="2" value="" /></td>
<td width="24%">Telephone<span class="reqd">*</span></td>
<td><input type="phone" class="required" name="btelephonenumber" tabindex="3" value="" /><span name="btelephonenumberFail"></span></td></tr>
<tr><td width="24%">First Name<span class="reqd"> *</span></td><td width="24%"><input name="firstName" type="text" class="required" tabindex="1" value="" />
<span id="firstName-err" class="errMsg"></span></td><td width="24%">Mobile Phone</td>
<td><input name="mobilePhone" type="phone" tabindex="3" value="" /></td></tr>
<tr><td>Last Name<span class="reqd">*</span></td><td><input name="lastname" type="text" class="required" tabindex="3" value="" /></td><td colspan="2"></td></tr>
<tr><td>Email<span class="reqd"> *</span></td><td colspan="3"><input name="email" type="email" class="required" tabindex="5" value="" size="40" /></td></tr>
</table>

请原谅javascript，它的实验代码，但如果他们尝试提交没有足够的数据，可以使用一些帮助显示页面上的错误。即使我在其他代码示例中看到过，innerHTML也不起作用。

提前致谢

p.s如果我在javascript代码中引入错误，“Hello”函数停止工作，这有助于我跟踪我在上面的代码中构建时遇到的一些语法错误。在撰写这个问题时，我会查看一些其他问题。

ps2，请不要建议使用jQuery，应该可以通过一些相当简单的javascript来做到这一点，我认为我在正确的轨道上。

使用javascript验证表单字段

0 个答案: