Formvalidierung mit Javascript und BootstrapDialog

Ich versuche, Formvalidierung mit Javascript, aber ich denke, es gibt einige Probleme für das Namensfeld.Formvalidierung mit Javascript und BootstrapDialog

Immer, wenn ich einen Wert für das Namensfeld eingebe, wird automatisch eine andere Validierung übersprungen und an die index.php weitergeleitet.

Ein anderes Szenario ist, nachdem ich alle außer Name Feld ausgefüllt, wird es automatisch andere Validierung überspringen und mich zu index.php leiten.

Jede Hilfe wird geschätzt!

<!DOCTYPE html> 
<html> 
<head> 
<!-- https://stackoverflow.com/questions/10585689/change-the-background-color-in-a-twitter-bootstrap-modal 
http://nakupanda.github.io/bootstrap3-dialog/ 

--> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> 

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
<link href- "css/trying.css" > 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> 



<script> 

function showError(message) { 

    BootstrapDialog.show({ 
    title: 'Attention', 
    message: message, 
    type: BootstrapDialog.TYPE_DANGER, 
    buttons: [{ 
     label: 'Ok', 
     cssClass: 'btn-default', 
     action: function(dialog) { 
     dialog.close(); 
     } 
    }] 
    }); 

    return false; 
} 



function validationFunction($msg){ 
    var list = document.createElement('ul'); 
    for(var i = 0; i < $msg.length; i++) { 
     var item = document.createElement('li'); 
     item.appendChild(document.createTextNode($msg[i])); 
     list.appendChild(item);  
    } 

    showError($msg); 
    return false; 
} 


function validateForm(form) { 

    var RE_NAME = /^[A-Z a-z]+$/; 
    var RE_EMAIL = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/; 
    var RE_PASSWORD = /^[\S]{6,20}$/ 
    var errors = []; 

    var name = form.reg_full_name.value; 
    var email = form.reg_email.value; 
    var password = form.reg_password.value; 
    var confirmPass = form.reg_confirmpass.value; 
    //Name Validation 
    if (name == "") { 
     errors.push("Please enter your full name"); 
    } 
    else if (!RE_NAME.test(x)){ 
     errors.push("Please enter valid name"); 

    } 

    //Email Validation 
    if (!RE_EMAIL.test(email)){ 
     errors.push("Please enter a valid Email"); 
    } 


    //Password Validation 
    if (password =="" || confirmPass ==""){ 
     errors.push("Password and Comfirmation Password required"); 
    } 

    else if (!RE_PASSWORD.test(password)){ 
     errors.push("Please a enter a password 6 - 20 characters in length"); 
    } 

    else if (password!= confirmPass){ 
     errors.push("Your password and confirmation password do not match"); 
    } 



    //If more than 1 error 
    if (errors.length > 1) { 
     validationFunction(errors); 
     alert(errors); 
     return false; 
    } 



} 
</script> 
</head> 
<body> 

<form name="myForm" action="" 
onsubmit="return validateForm(this)" method="post"> 

Name: <input type="text" name="reg_full_name"><br><br> 
Email: <input type="email" name="reg_email"><br><br> 
Password: <input type="password" name="reg_password"><br><br> 
Confirm Password: <input type="password" name="reg_confirmpass"><br><br> 
<input type="submit" value="Submit"> 
</form> 

</body> 
</html>

Quelle

2017-07-11 beginnerK

Das Array "Fehler" wird nicht mit den richtigen Werten gefüllt.

Der richtige Weg, dies zu tun wäre:

errors.push("Please enter your full name");

Dann wird Ihre Fehler Array ein neuer Eintrag „Bitte geben Sie Ihren vollständigen Namen“, die nun auch eine Länge hat einen Index von 0. Der Array So müssten Sie den Block justieren von 1., wo Sie fragen, ob es mehr als ein Fehler ist:

if (errors.length > 1)

Quelle

2017-07-11 17:28:21 makobasuri

Danke für die Korrektur mich. :) Ich dachte errors.length ist die Array-Größe. Wenn es nur einen Fehler gibt, wird die if-Anweisung direkt übersprungen. – beginnerK

Sie haben Recht, .Length ist die Größe des Arrays, genauer gesagt, die Anzahl der Elemente innerhalb des Arrays. .length selbst ist kein Array, daher beginnt es nicht mit 0, wenn ein Element darin ist. Wenn also die Validierung nur Fehler anzeigen soll, wenn mehr als 1 Fehler vorhanden sind, wie im Kommentar steht, dann müssen Sie sagen: if (errors.length> 1) {...} Wenn ja nur ein Fehler (oder gar kein Fehler), dann wird der Code innerhalb der Klammern nicht ausgeführt. – makobasuri

Sorry, jeder. Ich habe das Problem gefunden. Ist mein Flüchtigkeitsfehler, ich habe versehentlich die falsche Variable in dieser Zeile eingegeben, die meine ganze Validierung

! RE_NAME.test (x) gelöst

Das Problem verursacht.

Quelle

2017-07-11 18:13:34 beginnerK

Formvalidierung mit Javascript und BootstrapDialog

Antwort

Verwandte Themen