Проверка формы с использованием javascript и BootstrapDialog

Я пытаюсь выполнить проверку формы с помощью javascript, однако я думаю, что есть некоторые проблемы с полем имени.

Всякий раз, когда я ввожу какое-либо значение в поле имени, оно автоматически пропускает другую проверку и направляет меня на index.php.

Другой сценарий: после того, как я заполнил все поля, кроме имени, он автоматически пропустит другую проверку и направит меня к index.php.

Любая помощь будет оценена!

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

javascript validation bootstrap-modal bootstrap-dialog
person beginnerK    schedule 11.07.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Массив «ошибки» не заполняется правильными значениями.

Правильный способ сделать это:

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

Затем ваш массив ошибок получает новую запись «Пожалуйста, введите ваше полное имя», которая имеет индекс 0. Массив теперь также имеет длину 1. Таким образом, вам нужно будет настроить блок, где вы спрашиваете, есть ли более одного ошибка для:

if (errors.length > 1)
person makobasuri    schedule 11.07.2017
comment
Спасибо, что поправили меня. :) Я думал, что errors.length - это размер массива. Если есть только 1 ошибка, он напрямую пропустит оператор if? - person beginnerK; 11.07.2017
comment
Вы правы, .length — это размер массива, точнее, количество элементов внутри массива. .length сам по себе не является массивом, поэтому он не начинается с 0, если внутри есть один элемент. Итак, если вы хотите, чтобы проверка показывала ошибки только в том случае, если ошибок больше 1, как говорится в комментарии, вам нужно сказать: if(errors.length›1){...} Если есть только одна ошибка (или вообще никакой ошибки), то код внутри скобок не будет выполняться. - person makobasuri; 12.07.2017

arrow_upward
0
arrow_downward

Извините, все. Я нашел проблему. Это моя неосторожная ошибка, я случайно ввел неправильную переменную в этой строке, что вызывает всю мою проверку

!RE_NAME.test(x)

Проблема решена.

person beginnerK    schedule 11.07.2017