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

Question

I am new to .asp and Javascript and wondered if someone was able to advise how to show validation errors for fields below the form in a single table or text field rather than using alerts. Alerts and validation are working.

Here is the table that i plan to put the validation errors into:

 <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> 

And here is an example of some the Javascript I am using where i need the validation error messages to show in the table rather than from alerts.

Would be extremely grateful for any advise

 < 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> 

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

Answer 1

There are many ways that this type of thing can be done, here is one way which I have put together based on what you have so far...

http://jsfiddle.net/c0nh2rke/

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

 <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> 

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>

Script

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

The best JavaScript is no JavaScript.

To that end, consider:

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

Notice how the browser will render native UI to show that the field was left blank? This is by far the best way to do it because it doesn't rely on JavaScript. Not that there's anything wrong with JS, mind, but far too often a single typo in form validation code has caused hours of debugging!