JavaScript перезагружает полную страницу

Question

Я использую следующий скрипт для проверки регистрационной формы:

$(document).ready(function() { 
    $("#register").click(function() { 
     var name = $("#name").val(); 

     var email = $("#email").val(); 

     var password = $("#password").val(); 

     var cpassword = $("#cpassword").val(); 

     if (name == '' || email == '' || password == '' || cpassword == '') { 
      alert("Please fill all fields...!!!!!!"); 
     } else if ((password.length) < 8) { 
      alert("Password should at least 8 character in length...!!!!!!"); 
     } else if (!(password).match(cpassword)) { 
      alert("Your passwords don't match. Try again?"); 
     } else { 
      $.post("register.php", { 
       name1: name, 
       email1: email, 
       password1: password 
      }, function(data) { 
       if (data == 'You have Successfully Registered.....') { 

        alert("Tu cuenta de usuario ha sido creada"); 

       } 

      }); 
     } 
    }); 
}); 

Я проверяю все возможные варианты, и я обнаружил, что условия работают, но вместо того, чтобы остановить выполнение сценария, страница перезагружается после выполнения одного условия. Например, если длина пароля 6 символов, предупреждение:

alert("Password should at least 8 character in length...!!!!!!"); 

брошен, но страница перезагружает снова и весь текст в поле ввода удаляется ...

А также, когда $ .post выполняется, и ответ ожидается, предупреждение:

alert("Tu cuenta de usuario ha sido creada"); 

Не показано. Запись создается в базе данных, и страница перезагружается снова, но предупреждение не отображается.

EDIT

Это HTML часть формы:

<div class="form-bottom"> 
           <form role="form" method="post" action="#" class="login-form" id="login_form"> 
            <div class="form-group"> 
             <label class="sr-only" for="form-username">Usuario</label> 
             <input type="text" name="dname" placeholder="Usuario..." class="form-username form-control" id="name"> 
            </div> 
            <div class="form-group"> 
             <label class="sr-only" for="form-email">Email</label> 
             <input type="text" name="email" placeholder="Email..." class="form-email form-control" id="email"> 
            </div> 

            <div class="form-group"> 
             <label class="sr-only" for="form-password">Contraseña</label> 
             <input type="password" name="password" placeholder="Contraseña..." class="form-password form-control" id="password"> 
            </div> 
            <div class="form-group"> 
             <label class="sr-only" for="form-confirm-password">Confirmar Contraseña</label> 
             <input type="password" name="cpassword" placeholder="Confirmar Contraseña..." class="form-password form-control" id="cpassword"> 
            </div><br> 
            <button type="submit" name="register" id="register" class="btn">Crear cuenta de usuario</button> 


           </form> 

Answer 1

В вашем изменении формы HTML следующий код кнопки

<button type="submit" name="register" id="register" class="btn">Crear cuenta de usuario</button> 

в

<button type="button" name="register" id="register" class="btn">Crear cuenta de usuario</button> 

Вот fiddle

Единственное, что изменилось, это тип кнопки.

Answer 2

может быть вашим #Register является кнопка отправки и форма размещения

Answer 3

При нажатии на кнопку она выполняет по умолчанию для этой кнопки. Так как ваша кнопка имеет тип submit, действие по умолчанию - отправить форму. Это то, что вы видите в своем приложении - вы запускаете скрипт, а затем отправляется форма.

Для того, чтобы предотвратить, что вам нужно использовать метод preventDefault на объект события:

$("#register").click(function(e) { // <- pass event object as first parameter 
    e.preventDefault(); // <- call preventDefault to prevents form from submitting 
    var name = $("#name").val(); 
    // the rest of your code 
} 

При вызове этого метода не будет срабатывать действие по умолчанию события. В вашем случае это означает, что форма не будет отправлена, и ваш код должен работать нормально.

Answer 4

Вы должны вернуть ложь в конце события нажатия

$(document).ready(function() { 
$("#register").click(function() { 
    var name = $("#name").val(); 

    var email = $("#email").val(); 

    var password = $("#password").val(); 

    var cpassword = $("#cpassword").val(); 

    if (name == '' || email == '' || password == '' || cpassword == '') { 
     alert("Please fill all fields...!!!!!!"); 
    } else if ((password.length) < 8) { 
     alert("Password should at least 8 character in length...!!!!!!"); 
    } else if (!(password).match(cpassword)) { 
     alert("Your passwords don't match. Try again?"); 
    } else { 
     $.post("register.php", { 
      name1: name, 
      email1: email, 
      password1: password 
     }, function(data) { 
      if (data == 'You have Successfully Registered.....') { 

       alert("Tu cuenta de usuario ha sido creada"); 

      } 

     }); 
    } 
    return false; // put this it will solve your problem 
}); 
});