Formularvalidierung funktioniert nicht mit Javascript/HTML

Ich habe meinen Code den ganzen Tag getestet, aber nichts passiert. Das Formular öffnet automatisch die success.html und verwendet das Skript nicht.Formularvalidierung funktioniert nicht mit Javascript/HTML

\t function FormValidation(theForm) { 
 
\t  var errors = ""; 
 
\t  var alph = /^[\w ]+$/; 
 
\t  var cardnumb = /^\d{16}$/; 
 
\t  var cvvnumb = /^\d{3}$/; 
 
\t  var monthnumb = /^\d{1,2}$/; 
 
\t  var yearnumb = /^\d{4}$/; 
 

 
\t  if (form.one.value == "") { 
 
\t   errors += "Please enter your full name! \n"; 
 
\t \t } 
 

 
\t  else if (!alph.test(form.one.value)) { 
 
\t   errors += "Full name is wrong or includes invalid characters! \n"; 
 
\t  } 
 
\t  if (form.two.value == "") { 
 
\t   errors += "Please enter your 16-digit code! \n"; 
 
\t  } 
 

 
\t  if (!cardnumb.test(form.two.value)) { 
 
\t   errors += "Card number does not consist of 16 digits or includes invalid characters! \n"; 
 
\t  } 
 

 
\t  if (form.three.value == "") { 
 
\t   errors += "Please enter your month of expiration! \n"; 
 
\t  } 
 

 
\t  if (!monthnumb.test(form.three.value)) { 
 
\t   errors += "The month does not consist of 2 digits or includes invalid characters! \n"; 
 
\t  } 
 
\t \t  
 
\t  if (form.four.value == "") { 
 
\t   errors += "Please enter your year of expiration! \n"; 
 
\t  } 
 

 
\t  if (!yearnumb.test(form.four.value)) { 
 
\t   errors += "The year does not consist of 4 digits or includes invalid characters! \n"; 
 
\t  } 
 

 
\t  if (form.five.value == "") { 
 
\t   errors += "Please enter your 3-digit CVV code! \n"; 
 
\t  } 
 

 
\t  if (!cvvnumb.test(form.five.value)) { 
 
\t   errors += "The CVV does not consist of 3 digits or includes invalid characters! \n"; 
 
\t  } 
 
\t \t  
 
\t  if (!content == "") { 
 
\t  \t alert(content); 
 
\t  \t return false; 
 
\t \t } 
 
\t }

<!DOCTYPE html> 
 
    <html lang="en-US" class="Html" id="Main" dir="auto"> 
 
    <head class="Head" id="Main"> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t <meta name="description" content="NRN"> 
 
\t <meta name="author" content="NRN"> 
 
\t <title class="Title" id="Title">NRN</title> 
 

 
    
 
    </head> 
 
    <body class="Body" id="Main"> 
 
\t <nav> 
 
    \t \t <ul> 
 
    \t \t <li><a href="index.html">Home</a></li> 
 
    \t \t </ul> 
 
\t </nav> 
 
\t <p class="p1">Payment form validation using JavaScript<p> 
 
\t <form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="javascript:return FormValidation(this)"> 
 
\t <div class="form-group-name"> 
 
     <label for="name">Owner</label><br> 
 
     <input type="text" placeholder="Name on card" class="form-control-1" id="one" name="one"> 
 
    </div> 
 
    <div class="form-group-number"> 
 
     <label for="number">Card number</label><br> 
 
     <input type="text" placeholder="16-digit code" class="form-control-2" id="two" name="two"> 
 
    </div> 
 
    <div class="form-group-date"> 
 
     <label for="date">Expiration date</label><br> 
 
     <input type="text" placeholder="Month" class="form-control-3" id="three" name="three"> 
 
     <input type="text" placeholder="Year" class="form-control-3" id="four" name="four"> 
 
    </div> 
 
    <div class="form-group-cvv"> 
 
     <label for="cvv">CVV</label><br> 
 
     <input type="text" placeholder="3-digit code" class="form-control-4" id="five" name="five"> 
 
    </div> 
 
    <div class="form-group-submit"> 
 
     <input type="submit" class="submit_form" value="Validate"> 
 
    </div> 
 
    </form> 
 
    </body> 
 
    </html>

ich alles überprüft haben, sowie viele Tutorials auch, aber es hilft nicht. Bitte helfen Sie! Danke im Voraus! Könnte das Problem in der .css Datei sein?

Quelle

2017-03-15 Niksan555

haben, wenn ich einreichen getroffen ich diesen Fehler in der Konsole sehen: blockierter Form Vorlage zu ‚success.html‘, weil die Der Rahmen von form ist sandboxed und die Berechtigung "allow-forms" ist nicht gesetzt. – Monicka

Zweiter Fehler in der Konsole: Blockierte Formularübertragung an '', da der Rahmen des Formulars Sandboxed ist und die Berechtigung 'Erlauben-Formulare' nicht gesetzt ist. – Monicka

Ihre Javascript Validierungsfunktion nie falsch zurückgibt, weil content nie gleich "" ist, content nirgends so eingestellt ist, wird es sein, undefiniert, so dass das Formular auch dann weiter übermittelt wird, wenn ein Fehler aufgetreten ist.

Für den Anfang sollten Sie

if (!content == "") { 
    alert(content); 
    return false; 
}

if (!errors == "") { 
    alert(errors); 
    return false; 
} else { 
    return true; 
}

ändern Wenn Ihr JavaScript-Funktion true zurückkehrt, wird die Formular fortzufahren. Wenn es false zurückgibt, wird es im Falle eines Fehlers aufhören, das Formular zu senden.

Zusätzlich Sie eine Funktion im onSubmit Attribut auf dem form Element wie folgt einstellen:

<form onSubmit="return FormValidation(this)""></form>

wie erwähnt von Tulio Faria

Quelle

2017-03-15 12:58:09 Jouke

in der Tat onSubmit erwartet bereits eine Javascript-Funktion. Also, Sie können dies tun, anstatt (entfernen Sie die javascript: von onSubmit):

<form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="return FormValidation(this)">

Quelle

2017-03-15 12:56:00

löst diese Lösung sein Problem? – Monicka

Ersetzen 'form' mit 'theFrom' in dir

funktionieren

können Sie debuggen und das Formular finden hier undefined

if (form.one.value == "") { 
    errors += "Please enter your full name! \n"; 
}

ersetzen Sie es mit 'theForm' jeder, wo in Funktion FormValidation

if (theForm.one.value == "") { 
    errors += "Please enter your full name! \n"; 
}

wieder Inhalt hier nicht definiert

if (!content == "") { 
    alert(content); 
    return false; 
}

es Fehler statt

if (!errors == "") { 
    alert(errors); 
    return false; 
} else { 
    return true; 
}

Hier ist Ihre Arbeits Code sein sollte

<!DOCTYPE html> 
<html lang="en-US" class="Html" id="Main" dir="auto"> 
<head class="Head" id="Main"> 
<meta name="description" content="NRN"> 
<meta name="author" content="NRN"> 
<title class="Title" id="Title">NRN</title> 

<script type="text/javascript"> 

function FormValidation(theForm) { 
    var errors = ""; 
    var alph = /^[\w ]+$/; 
    var cardnumb = /^\d{16}$/; 
    var cvvnumb = /^\d{3}$/; 
    var monthnumb = /^\d{1,2}$/; 
    var yearnumb = /^\d{4}$/; 

    if (theForm.one.value == "") { 
     errors += "Please enter your full name! \n"; 
    } 

    else if (!alph.test(theForm.one.value)) { 
     errors += "Full name is wrong or includes invalid characters! \n"; 
    } 
    if (theForm.two.value == "") { 
     errors += "Please enter your 16-digit code! \n"; 
    } 

    if (!cardnumb.test(theForm.two.value)) { 
     errors += "Card number does not consist of 16 digits or includes invalid characters! \n"; 
    } 

    if (theForm.three.value == "") { 
     errors += "Please enter your month of expiration! \n"; 
    } 

    if (!monthnumb.test(theForm.three.value)) { 
     errors += "The month does not consist of 2 digits or includes invalid characters! \n"; 
    } 

    if (theForm.four.value == "") { 
     errors += "Please enter your year of expiration! \n"; 
    } 

    if (!yearnumb.test(theForm.four.value)) { 
     errors += "The year does not consist of 4 digits or includes invalid characters! \n"; 
    } 

    if (theForm.five.value == "") { 
     errors += "Please enter your 3-digit CVV code! \n"; 
    } 

    if (!cvvnumb.test(theForm.five.value)) { 
     errors += "The CVV does not consist of 3 digits or includes invalid characters! \n"; 
    } 

    if (!errors == "") { 
     alert(errors); 
     return false; 
    } else { 
     return true; 
    } 
} 

</script> 
</head> 
<body class="Body" id="Main"> 
<nav> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
    </ul> 
</nav> 
<p class="p1">Payment form validation using JavaScript<p> 
<form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="javascript:return FormValidation(this)"> 
<div class="form-group-name"> 
    <label for="name">Owner</label><br> 
    <input type="text" placeholder="Name on card" class="form-control-1" id="one" name="one"> 
</div> 
<div class="form-group-number"> 
    <label for="number">Card number</label><br> 
    <input type="text" placeholder="16-digit code" class="form-control-2" id="two" name="two"> 
</div> 
<div class="form-group-date"> 
    <label for="date">Expiration date</label><br> 
    <input type="text" placeholder="Month" class="form-control-3" id="three" name="three"> 
    <input type="text" placeholder="Year" class="form-control-3" id="four" name="four"> 
</div> 
<div class="form-group-cvv"> 
    <label for="cvv">CVV</label><br> 
    <input type="text" placeholder="3-digit code" class="form-control-4" id="five" name="five"> 
</div> 
<div class="form-group-submit"> 
    <input type="submit" class="submit_form" value="Validate"> 
</div> 
</form> 
</body> 
</html>

Quelle

2017-03-15 13:11:56 BlackHat

Ihr Problem ist, dass Sie das Submit-Ereignis behandeln müssen, so dass Ihre Funktion einen zusätzlichen Parameter (event) benötigt und die erste Codezeile darin (die Funktion) event.preventDefault() sein muss, wenn Sie das Formular vorher absenden Übergeben Sie es, Ihre Funktion wird ausgeführt, und dann am Ende Ihres Codes, wenn die Validierung in Ordnung ging, senden Sie Ihr Formular mit Hilfe von js wie erläutert here.Sie werden so etwas wie

function formValidation(theForm, event) 
{ 
    event.preventDefault() 
    //your code 

    if(allOk) 
    {   theForm.submit() 
} 
    else 
{ 
    //do something 
} 


}

Auf der HTML-Seite haben Sie

<form method="POST" action="success.html" class="myForm" name="myForm" onSubmit="return FormValidation(this, event)">

Quelle

2017-03-15 13:12:52 Marange

Formularvalidierung funktioniert nicht mit Javascript/HTML

Antwort

Verwandte Themen