注册期间弹出消息

Question

recently started to deal with javascript, now I'm doing a registration page. And at the moment the notification about the incorrect filling of the form is displayed via alert () . How can this be improved so that if you enter incorrectly, you immediately see a hint ?

 function valid(form){ var checker = false; var namePattern = new RegExp("^([Az]{4,20})$"); var passwordPattern = new RegExp("^[A-z0-9]{4,20}$"); var emailPattern = new RegExp("^[_A-Za-z0-9-\\\\+]+(\\\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\\\.[A-Za-z0-9]+)*(\\\\.[A-Za-z]{2,5})$"); var fName = form.fName.value; var lName = form.lName.value; var password = form.password.value; var confirmPassword = form.confirmPassword.value; var email = form.eMail.value; if(!namePattern.test(fName)){ checker = "Wrong first name"; }else if(!namePattern.test(lName)){ checker = "Wrong last name" }else if(!passwordPattern.test(password)){ checker = "Wrong password" }else if(confirmPassword != password){ checker = "Your passwords do not match" }else if(!emailPattern.test(email)){ checker = "Wrong email" } if(checker){ alert(checker); } } 

 <form action="" method="post" name="submit" onsubmit="valid(this)"> <div class="register-top-grid"> <h3>PERSONAL INFORMATION</h3> <div> <span>First Name<label>*</label></span> <input type="text" name="fName" id="fName" placeholder="Your first name"> </div> <div> <span>Last Name<label>*</label></span> <input type="text" name="lName" placeholder="Your last name"> </div> <div> <span>Email Address<label>*</label></span> <input type="text" name="eMail" placeholder="You email"> </div> <div class="clear"></div> <a class="news-letter" href="#"> <label class="checkbox"><input type="checkbox" name="checkbox" checked=" "><i> </i>Sign Up for Newsletter</label> </a> <div class="clear"></div> </div> <div class="clear"></div> <div class="register-bottom-grid"> <h3>LOGIN INFORMATION</h3> <div> <span>Password<label>*</label></span> <input type="password" name="password" placeholder="Your password"> </div> <div> <span>Confirm Password<label>*</label></span> <input type="password" name="confirmPassword" placeholder="Confirm your password"> </div> <div class="clear"></div> </div> <div class="clear"></div> <input type="submit" name="submit" value="submit"/> </form> 

I will be grateful for help)

Answer 1

I suggest you put on input elements onchange function, for example:

<input type="text" name="fName" id="fName" placeholder="Your first name" onchange='validateInput(e)'>

And then you check in function:

function validateInput(e){
  var namePattern = new RegExp("^([A-z]{4,20})$");
  const value = e.target.value;

  if(!namePattern.test(value)){
    alert("Wrong first name");
    // But instead of alert I would suggest you change the color of the input element in order for the user to see real time that he is entering wrong thing. 
    //When he enters correct data, input border should be green. This is much more user friendly 
  }
}

Answer 2

You can every validation check separately like this...

 function firstname(value){ var checker = false; var namePattern = new RegExp("^([Az]{4,20})$"); if(!namePattern.test(value)){ checker = "Wrong first name"; } if(checker){ alert(checker); } } 

 <input type="text" name="fName" id="fName" placeholder="Your first name" onblur="firstname(this.value)"> 

I suggest you can use jquery validation.

Answer 3

The thing is, you are checking your form on your submit event (which is obviously the event that is trigger when the form is submitted).

You need to add input validation on each of your input fields via certain event listeners.

If you add onchange event listener, your callback validation will fire each time you move your focus to another element (aka blur event).

If you add oninput event listener, your callback validation will fire each time you type something new.

I would recommend taking a look at the answers of this question.

Answer 4

 var checker; function valid(form){ checker = ''; var namePattern = new RegExp("^([Az]{4,20})$"); var passwordPattern = new RegExp("^[A-z0-9]{4,20}$"); var emailPattern = new RegExp("^[_A-Za-z0-9-\\\\+]+(\\\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\\\.[A-Za-z0-9]+)*(\\\\.[A-Za-z]{2,5})$"); var fName = form.fName.value; var lName = form.lName.value; var password = form.password.value; var confirmPassword = form.confirmPassword.value; var email = form.eMail.value; if(!namePattern.test(fName)){ checker += "No first name<br/>"; } if(!namePattern.test(lName)){ checker += "No last name<br/>" } if(!passwordPattern.test(password)){ checker += "No password<br/>" } if(confirmPassword != password){ checker += "Your passwords do not match<br/>" } if(!emailPattern.test(email)){ checker += "No email<br/>" } if(checker){ document.getElementById("hint").innerHTML = checker; } } valid(document.getElementById("form")); 

 <form id='form' action="return false;" method="post" name="submit" oninput="valid(this)" onsubmit=' return false;'> <div class="register-top-grid"> <h3>PERSONAL INFORMATION</h3> <div> <span>First Name<label>*</label></span> <input type="text" name="fName" id="fName" placeholder="Your first name"> </div> <div> <span>Last Name<label>*</label></span> <input type="text" name="lName" placeholder="Your last name"> </div> <div> <span>Email Address<label>*</label></span> <input type="text" name="eMail" placeholder="You email"> </div> <div class="clear"></div> <a class="news-letter" href="#"> <label class="checkbox"><input type="checkbox" name="checkbox" checked=" "><i> </i>Sign Up for Newsletter</label> </a> <div class="clear"></div> </div> <div class="clear"></div> <div class="register-bottom-grid"> <h3>LOGIN INFORMATION</h3> <div> <span>Password<label>*</label></span> <input type="password" name="password" placeholder="Your password"> </div> <div> <span>Confirm Password<label>*</label></span> <input type="password" name="confirmPassword" placeholder="Confirm your password"> </div> <div class="clear"></div> </div> <div class="clear"></div> <div style='color:red' id='hint'></div> <input type='submit'/> </form> 

Using the oninput event to run every single time a input is changed. More user friendly by displaying a text tip instead of popups, and shows all errors, not just the first one in the if/elseif loop.

PS: You seem to have forgotten to add the submit button in your code.

EDIT: Also made it check validation as soon as the page loaded up too.