form validation сохранить информацию

Question

Я пытаюсь сохранить информацию, которую вы уже написали, даже если у вас есть ошибка при заполнении формы. Теперь, если вы ничего не написали правильно, все поля очищаются, и вам нужно начинать с начало.

Это HTML

<form class="form" method="post" action="" name="registration" onsubmit="return formValidation()" > 
       <h2>Register now for free!</h2> 
       <label for="Fname">First name :</label> 
       <input type="text" name="Fname" id="Fname" placeholder="First Name"> 
       <label for="Lname">Last name :</label> 
       <input type="text" name="Lname" id="Lname" placeholder="Last Name"> 
       <label for="email">Email :</label> 
       <input type="text" name="email" id="email" placeholder="example@email.com"> 
       <label for="password">Password :</label> 
       <input type="password" name="password" id="password" placeholder="******"> 
       <label for="cpassword">Confirm Password :</label> 
       <input type="password" name="cpassword" id="cpassword" placeholder="******"> 
       <label id="gender">Gender : </label> 
       <input type="radio" name="sex" value="male"><span>Male</span> 
       <input type="radio" name="sex" value="female"><span>Female</span><br /> 
       <input type="submit" id="submit" name="submit" value="Register"> 
      </form> 

Это Javascript

function formValidation() { 
    var fName = document.getElementById("Fname").value; 
    var lName = document.getElementById("Lname").value; 
    var email = document.getElementById("email").value; 
    var pass = document.getElementById("password").value; 
    var cpass = document.getElementById("cpassword").value; 

    if (fName_validation(fName, 20, 3)) { 
     if (lName_validation(lName, 20, 3)) { 
      if (email_validation(email)) { 
       if (pass_validation(pass, 20, 6)) { 
       } 
      } 
     } 
    } 

    function fName_validation(fName, max, min) { 
     var check_name = /^[A-Za-z\s ]{2,20}$/; 
     if (!fName.match(check_name)) { 
      alert("First name should not be empty/length be between " + max + " to " + min); 
      fName.focus(); 
      return false; 
     } 
     return true; 
    } 
    function lName_validation(lName, max, min) { 
     var check_name = /^[A-Za-z\s ]{2,20}$/; 
     if (!lName.match(check_name)) { 
      alert("Last name should not be empty/length be between " + max + " to " + min); 
      lName.focus(); 
      return ; 
     } 
     return true; 
    } 
    function email_validation(email) { 
     var checkk_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; 
     if (!email.match(checkk_email)) { 
      alert("Please enter a valid email!"); 
      email.focus(); 
      return ; 
     } 
     return true; 
    } 
    function pass_validation(pass, max, min) { 
     var check_password = /(?=.*\d)(?=.*[a-z]).{6,}/; 
     if (!pass.match(check_password)) { 
      alert("Your password should have at least one number,one letter and should be a least 6 characters!"); 
      pass.focus(); 
      return false; 
     } 
     if (pass !== cpass) { 
      alert("Password don't match!"); 
      cpass.focus(); 
      return false; 
     } 
    } 
    alert("Well Done!You successfully registered!"); 
    return true; 
} 

Answer 1

убедитесь, что каждый метод проверки должен возвращать истинным или ложным.

измените два return ; на return false

Answer 2

Я бы не сделать это с помощью JavaScript! Потому что HTML5 делает работу для вас. Поэтому есть атрибуты <input> и модель.

<input type="text" pattern="[A-Za-z]{2,20}" required="" /> 

Пользователь должен знать, какой шаблон он может использовать. И все в порядке.

Example