Question

我是.asp和Javascript的新手，想知道是否有人能够建议如何在单个表格或文本字段中显示表单下方字段的验证错误，而不是使用警报。警报和验证工作正常。

这是我计划将验证错误放入的表格：

＆＃13;

<asp:Table ID="StatusTable" 
            runat="server" Width="100%"><asp:TableRow ID="StatusRow" runat="server">
                <asp:TableCell ID="StatusTextCell" runat="server" Width="95%">
                    <asp:TextBox ID="StatusTextBox" runat="server" Width="100%" />
                </asp:TableCell><asp:TableCell ID="StatusPadCell" runat="server" Width="5%">
                    &nbsp;
                </asp:TableCell></asp:TableRow></asp:Table>

＆＃13;

这里有一些我正在使用的Javascript示例，我需要在表中显示验证错误消息而不是警报。

非常感谢任何建议

＆＃13;

< script type = "text/javascript"
language = "Javascript" >
  function RequiredTextValidate() {
    //check all required fields from Completed Table are returned
    if (document.getElementById("<%=CompletedByTextBox.ClientID%>").value == "") {
      alert("Completed by field cannot be blank");
      return false;
    }

    if (document.getElementById("<%=CompletedExtTextBox.ClientID %>").value == "") {
      alert("Completed By Extension field cannot be blank");
      return false;
    }

    if (document.getElementById("<%=EmployeeNoTextBox.ClientID %>").value == "") {
      alert("Employee No field cannot be blank");
      return false;
    }

    if (document.getElementById("<%=EmployeeNameTextBox.ClientID %>").value == "") {
      alert("Employee Name field cannot be blank");
      return false;

    }
    return true;
  }

< /script>

＆＃13;

function ValidateFields() {
            //Validate all Required Fields on Form
       
            if (RequiredTextValidate() && CheckDate(document.getElementById("<%=SickDateTextBox.ClientID%>").value) && CheckTime(this) && ReasonAbsent() && ReturnDateChanged() && FirstDateChanged() && ActualDateChanged() == true) {
                    return true; 
                }
                else
                return false;
        }

＆＃13;

Answer 1

有很多方法可以做这种事情，这是我根据你到目前为止所做的一种方式......

http://jsfiddle.net/c0nh2rke/

＆＃13;

function RequiredTextValidate() {
    var valMessage = '';
    var valid = true;
    //check all required fields from Completed Table are returned
    if (document.getElementById("test1").value == "") {
        valMessage += 'Completed by field cannot be blank <br />';
      valid = false;
    }

    if (document.getElementById("test2").value == "") {
        valMessage += 'Completed By Extension field cannot be blank <br />';
      valid = false;
    }

    if (document.getElementById("test3").value == "") {
        valMessage += 'Employee No field cannot be blank <br />';
      valid = false;
    }

    if (document.getElementById("test4").value == "") {
        valMessage += 'Employee Name field cannot be blank <br />';
      valid = false;

    }
    if (valid) {
    return true;
    }
    else
    {
        document.getElementById("errors").innerHTML = valMessage;
        return false;
    }
  }

＆＃13;

<form >
<input id="test1" type="text" /><br />
<input id="test2" type="text" /><br />
<input id="test3" type="text" /><br />
<input id="test4" type="text" /><br />
    <input type="button" value="Submit" onclick="RequiredTextValidate()" />
</form>
<div id="errors"><div>

＆＃13;

HTML

<form >
<input id="test1" type="text" /><br />
<input id="test2" type="text" /><br />
<input id="test3" type="text" /><br />
<input id="test4" type="text" /><br />
    <input type="button" value="Submit" onclick="RequiredTextValidate()" />
</form>
<div id="errors"><div>

脚本

function RequiredTextValidate() {
    var valMessage = '';
    var valid = true;
    //check all required fields from Completed Table are returned
    if (document.getElementById("test1").value == "") {
        valMessage += 'Completed by field cannot be blank <br />';
      valid = false;
    }

    if (document.getElementById("test2").value == "") {
        valMessage += 'Completed By Extension field cannot be blank <br />';
      valid = false;
    }

    if (document.getElementById("test3").value == "") {
        valMessage += 'Employee No field cannot be blank <br />';
      valid = false;
    }

    if (document.getElementById("test4").value == "") {
        valMessage += 'Employee Name field cannot be blank <br />';
      valid = false;

    }
    if (valid) {
    return true;
    }
    else
    {
        document.getElementById("errors").innerHTML = valMessage;
        return false;
    }
  }

Answer 2

最好的JavaScript不是JavaScript。

为此，请考虑：

＆＃13;

<form action="javascript:alert('Submitted!');" method="post">
  <input type="text" name="someinput" placeholder="Type something!" required />
  <input type="submit" value="Submit form" />
</form>

＆＃13;

注意浏览器如何呈现原生UI以显示该字段是空白的？这是迄今为止最好的方法，因为它不依赖于JavaScript。并不是说JS存在任何问题，但很多时候，表单验证代码中的一个错误导致了几个小时的调试！

Javascript表单验证 - 如何在单个表中显示验证错误而不是使用警报

2 个答案: