Question

我正在搜索，但我不是100％如何重新提交此信息，使用新信息，我已经完成了所有错误并在适当时显示，但就如何再次点击提交按钮，然后重新评估表单;我该怎么做？任何帮助将不胜感激。

HTML

<!doctype html>
<html>
  <head>
   <meta charset="utf-8">
   <title>RATool</title>
   <link rel="stylesheet" type="text/css" href="cfcss.css">
   <script src="cf.js"></script>
  </head>
  <body>
   <h1> Health Authority </h1>
    <h2> Contact Form </h2>
      <form>
       <fieldset>
         <label for="fname">First Name:</label>
            <input name="fname" id="fname" class="formfield" type="text">
            <span id="errfname" class="error">*This is required</span>
            <span id="errfname1" class="error">*Name fields must have more than one character, and do not contain numbers
                    or other non-allowed alphabetic characters. The only character the last name
                    field should legitimately contain is a hyphen (e.g. Whittaker-Jones).</span>
            <span id="errfname2" class="error">*This can only contain alphabetic numbers and if desired, one hyphen</span>
         <br>
         <label for="sname">Surname:</label>
            <input name="sname" id="sname" class="formfield" type="text">
            <span id="errsname" class="error">*This is required</span>
            <span id="errsname1" class="error">*Name fields must have more than one character, and do not contain numbers
                or other non-allowed alphabetic characters. The only character the last name
                field should legitimately contain is a hyphen (e.g. Whittaker-Jones).</span>
            <span id="errsname2" class="error">*This can only contain alphabetic numbers and if desired, one hyphen</span>
         <br>
         <label for="title">Title: </label>
              <select name="title" id="title">
                <option value="Please select">Please select</option>
                <option value="Mr.">Mr.</option>
                <option value="Ms.">Ms.</option>
                <option value="Mrs.">Mrs.</option>
                <option value="Miss.">Miss.</option>
                <option value="Master.">Master.</option>
              </select>
             <span id="errtitle" class="error">*This is required</span>
         <br>
         <br>
         <br>
         <label for="HANo">Health Authority Number:</label>
         <input name="HANo" id="HANo" class="formfield"type="text">
            <span id="errHANo" class="error">*This is required</span>
            <span id="errHANo2" class="error">*This must be in format ZHA123456 (ZHA followed by 6 numbers)</span>
         <br>
         <br>
         <label for="email">Email:</label>
            <input name="email" id="email" class="formfield"type="text">
            <span id="erremail" class="error">*This is required</span>
            <span id="erremail2" class="error">*Please enter a valid email</span>
            <br>
            <br>
            <br>
            <label for="telno">Telephone Number:</label>
                 <input name="telno" id="telno" class="formfield" type="text">
                <span id="errtelno" class="error">* If a telephone number is entered, then it should contain only numbers, not
                letters, or other disallowed characters. A valid Zedland telephone number has
                11 digits (no spaces)</span> 
                <span id="errtelno1" class="error">*This must just be numbers</span>
            <br>
            <button onclick="checkForm()">Submit</button>
        </fieldset>
       </form>
    </body>
</html>

的javascript

   function checkForm(){    

    var errors=document.getElementsByClassName('error');
    for(var i=0;i<errors.length;i++){
        errors[i].style.display='none';
    }   

    if (document.getElementById("fname").value == "" ) {
        document.getElementById("errfname").style.display = "inline";
        document.getElementById("errfname").style.visibility = "visible";
        e.preventDefault();
    }

    if (document.getElementById("fname").value.length < 2 ) {
        document.getElementById("errfname1").style.display = "inline";
        document.getElementById("errfname1").style.visibility = "visible";
        e.preventDefault();
    }

    if (document.getElementById("fname").value.length > 1) {
        checkFName();
        e.preventDefault();
    }

    if (document.getElementById("sname").value == "" ) {
        document.getElementById("errsname").style.display = "inline";
        document.getElementById("errsname").style.visibility = "visible";
        e.preventDefault();
    }

    if (document.getElementById("sname").value.length < 2 ) {
        document.getElementById("errsname1").style.display = "inline";
        document.getElementById("errsname1").style.visibility = "visible";
        e.preventDefault();
    }

    if (document.getElementById("sname").value.length > 1) {
        checkSName();
        e.preventDefault();
    }

    if (document.getElementById("title").value == "Please select" ) {
        document.getElementById("errtitle").style.display = "inline";
        document.getElementById("errtitle").style.visibility = "visible";
        e.preventDefault();
    }

    if (document.getElementById("HANo").value == "" ) {
        document.getElementById("errHANo").style.display = "inline";
        document.getElementById("errHANo").style.visibility = "visible";
        e.preventDefault();
    }

    if (document.getElementById("HANo").value.length > 0) {
        if (checkHANo());
        e.preventDefault();
    }

    if (document.getElementById("email").value == "" ) {
        document.getElementById("erremail").style.display = "inline";
        document.getElementById("erremail").style.visibility = "visible";
        e.preventDefault();
    }

    if (document.getElementById("email").value.length > 0 ) { 
        if(checkEmail());
        e.preventDefault();
    }

    if (document.getElementById("telno").value.length != 11 ) { 
        document.getElementById("errtelno").style.display = "inline";
        document.getElementById("errtelno").style.visibility = "visible";
        e.preventDefault();
    }

    if (document.getElementById("telno").value == /^\d+$/ ) {
        document.getElementById("errtelno1").style.display = "inline";
        document.getElementById("errtelno1").style.visibility = "visible";
        e.preventDefault();

    }
 }  

 function checkEmail(){
 var email = document.getElementById('email');
 var emailRegEx = /[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}/;

 if (!emailRegEx.test(email.value)) {
       document.getElementById("erremail2").style.display="inline";
       document.getElementById("erremail2").style.visibility = "visible";
       return true;
 }
 e.preventDefault();
 }

 function checkHANo(){
    var HANo = document.getElementById("HANo");
    var hanoRegEx = /[ZHA]\d{6}/;

    if (!hanoRegEx.test(HANo.value)) {
        document.getElementById("errHANo2").style.display = "inline";
        document.getElementById("errHANo2").style.visibility = "visible";
        return true;
    }
    e.preventDefault();
}

function checkFName(){
var first = document.getElementById("fname");
var firstRegEx = /^[a-zA-Z-]{2,40}$/;

if (!firstRegEx.test(first.value)){
    document.getElementById("errfname2").style.display = "inline";
    document.getElementById("errfname2").style.visibility = "visible";
    return true;
}
e.preventDefault();
}

function checkSName(){
 var sec = document.getElementById("sname");
 var secRegEx = /^[a-zA-Z-]{2,40}$/;

 if (!secRegEx.test(sec.value)){
    document.getElementById("errsname2").style.display = "inline";
    document.getElementById("errsname2").style.visibility = "visible";
    return true;
    }
    e.preventDefault();
}

Answer 1

默认显示您的错误消息。要隐藏那些，请在下面添加CSS类：

.error{ display:none; }

在checkForm()的开头添加此代码，以便在纠正错误时重新隐藏消息。例如：

var errors=document.getElementsByClassName('error');
for(var i=0;i<errors.length;i++){
    errors[i].style.display='none';
}

不要在按钮的formCheck()上调用onclick功能，而是使用onsubmit将其称为return。像

<form method="post" action="yourpage" onsubmit="return checkForm()">

要显示所有错误，请在true上方/下方声明一个默认值为var isValid=true;的变量，例如for loop 例如：

function checkForm(){    
var isValid = true;
var errors=document.getElementsByClassName('error');
for(var i=0;i<errors.length;i++){
    errors[i].style.display='none';
}   

if (document.getElementById("fname").value == "" ) {
    document.getElementById("errfname").style.display = "inline";
    document.getElementById("errfname").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("fname").value.length < 2 ) {
    document.getElementById("errfname1").style.display = "inline";
    document.getElementById("errfname1").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("fname").value.length > 1) {
    isValid = checkFName();
}

if (document.getElementById("sname").value == "" ) {
    document.getElementById("errsname").style.display = "inline";
    document.getElementById("errsname").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("sname").value.length < 2 ) {
    document.getElementById("errsname1").style.display = "inline";
    document.getElementById("errsname1").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("sname").value.length > 1) {
    isValid = checkSName();
}

if (document.getElementById("title").value == "Please select" ) {
    document.getElementById("errtitle").style.display = "inline";
    document.getElementById("errtitle").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("HANo").value == "" ) {
    document.getElementById("errHANo").style.display = "inline";
    document.getElementById("errHANo").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("HANo").value.length > 0) {
    isValid = checkHANo();
}

if (document.getElementById("email").value == "" ) {
    document.getElementById("erremail").style.display = "inline";
    document.getElementById("erremail").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("email").value.length > 0 ) { 
    if(checkEmail());
    isValid = false;
}

if (document.getElementById("telno").value.length != 11 ) { 
    document.getElementById("errtelno").style.display = "inline";
    document.getElementById("errtelno").style.visibility = "visible";
    isValid = false;
}

if (document.getElementById("telno").value == /^\d+$/ ) {
    document.getElementById("errtelno1").style.display = "inline";
    document.getElementById("errtelno1").style.visibility = "visible";
    isValid = false;

}
return isValid;
}

注意：如果出现错误，您还必须从false，checkEmail()等其他功能返回checkHANo()。您似乎只返回true。并删除所有e.preventDefault()

就是这样

错误纠正后，如何让我的表单使用新信息？

1 个答案: