Gibt es eine Möglichkeit, die Bewegung des Formulars zu stoppen?

Sobald die Validierung abgelaufen ist, bewegen sich die Textfelder, ich denke, dies ist, wo die Abwesenheit der Fehler angezeigt wird, hat es automatisch in den freien Speicherplatz verschoben. Gibt es einen Weg um dies speziell durch Javascript, HTML oder CSS?Gibt es eine Möglichkeit, die Bewegung des Formulars zu stoppen?

css

.error{ 
    visibility: hidden; 
    color: #FF2121; 
}

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> Zedland Health Authority </h1> 
    <h2> Contact Form </h2> 
     <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> 
      <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> 
     <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> 
      <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> 
      <br> 
      <button onclick="checkForm()">Submit</button> 
     </fieldset> 
    </body> 
</html>

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) { 
     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) { 
     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) { 
     if (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()); 
    } 

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

function checkEmail(){ 
var email = document.getElementById('email'); 
var emailRegEx = /[-\w.][email protected]([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"; 
     isValid = false; 
} 

} 

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"; 
     isValid = false; 
    } 

} 

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"; 
    isValid = false; 
} 

} 

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"; 
     isValid = false; 
    } 

}

Quelle

2016-08-07 Jiyl

besser html Layout/css –

helfen Ich dachte, die Brüche in der HTML-Hilfe würde, ist es möglich, jedes Etikett einzubringen eine definierte Größe - mit div oder einer "Container" ID in der HTML, und Höhe in der CSS definieren, so dass es sich nicht bewegt? Dies basiert auf der Validierung, die funktioniert hat, so dass das gesamte Bit zum Sammeln von Informationen funktioniert; Ich will nur, dass es ein bisschen besser aussieht. – Jiyl

Teilen Sie Ihre CSS auch, wäre einfacher zu testen, weil jede Fehlermeldung standardmäßig sichtbar ist. – yuriy636

<!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> Zedland Health Authority </h1> 
    <h2> Contact Form </h2> 
     <fieldset> 
     <br> <!-- NEW BR TAG HERE --> 
     <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 one hyphen</span> 
     <br> 
     <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 one hyphen</span> 
     <br> 
     <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 TAG HERE --> 
     <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> 
     <!-- BR TAG HERE --> 
     <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 TAG HERE --> 
     <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> 
      <br> 
      <button onclick="checkForm()">Submit</button> 
      <br> <!-- NEW BR TAG HERE --> 
     </fieldset> 
    </body> 
</html>

Quelle

2016-08-07 11:49:25 Jiyl

Gibt es eine Möglichkeit, die Bewegung des Formulars zu stoppen?

Antwort

Verwandte Themen