Message output using innerHTML

Question

I started to learn javascript and there was such a question. How to insert a message in a div when the form is filled is not correct? I've seen similar questions where innerHTML was used, but trying to translate it into my application, I did not get anything, the message is not output. Where could I be wrong?

var namePattern = new RegExp("^([A-z]{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 passwordPattern = new RegExp("^[A-z0-9]{4,20}$");

    document.getElementById("registration_form").addEventListener("submit", function(event) {
      var fName = document.getElementById("fName").value;
      var lName = document.getElementById("lName").value;
      var email = document.getElementById("email").value;
      var password = document.getElementById("pass").value;
      var confirmPassword = document.getElementById("confPass").value;
    
      if (!namePattern.test(fName)) {
        document.getElementById("error_first_name").innerHTML = 'Wrong first name';
        event.preventDefault();
      } else if (!namePattern.test(lName)) {
        document.getElementById("error_last_name").innerHTML = 'Wrong last name';
        event.preventDefault();
      } else if(!emailPattern.test(email)){
        document.getElementById("error_email").innerHTML = 'Wrong email';
        event.preventDefault();
      } else if(!passwordPattern.test(password)){
        document.getElementById("error_password").innerHTML = 'Wrong password';
        event.preventDefault();
      } else if(confirmPassword != password){
        document.getElementById("error_confirmPassword").innerHTML = ''
        event.preventDefault();
      }
    })

<form action="" method="post" id="registration_form">
                <div class="register-top-grid">
                    <h3>PERSONAL INFORMATION</h3>
                    <div>
                        <span>First Name<label>*</label></span>
                        <div id="error_first_name" style="color: #ff0000"></div>
                        <input type="text" name="fName" id="fName" placeholder="Your first name">
                    </div>
                    <div>
                        <span>Last Name<label>*</label></span>
                        <div id="error_last_name" style="color: #ff0000"></div>
                        <input type="text" name="lName" id="lName" placeholder="Your last name" >
                    </div>
                    <div>
                        <span>Email Address<label>*</label></span>
                        <div id="error_email" style="color: #ff0000"></div>
                        <input type="text" name="eMail" id="email" placeholder="Your email" >
                    </div
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
                <div class="register-bottom-grid">
                    <h3>LOGIN INFORMATION</h3>
                    <div>
                        <span>Password<label>*</label></span>
                        <div id="error_password" style="color: #ff0000"></div>
                        <input type="password" name="password" id="pass" placeholder="Your password">
                    </div>
                    <div>
                        <span>Confirm Password<label>*</label></span>
                        <div id="error_confirmPassword" style="color: #ff0000"></div>
                        <input type="password" name="confirmPassword" id="confPass" placeholder="Confirm your password">
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
                <input type="submit" name="submit" id="submit" value="submit"/>
            </form>

You have an error when you add your event listener. Change .addEventListener("submit", function(event)){ to .addEventListener("submit", function(event){ and change function's closing curly bracket in the script to });. Additionally make sure this script is at the end of your page, else it won't pick up #registration_form when the page loads. — jla
– jla, Commented Sep 23, 2018 at 14:28
Also to prevent the default action you have to actually call event.preventDefault();. — Pointy
– Pointy, Commented Sep 23, 2018 at 14:34

Sivakumar Tadisetti · Accepted Answer · 2018-09-23 14:38:44Z

There are a couple of things that were wrong.

First, there is nothing triggering the form submit for which I added a button that will submit the form.

Second event.preventDefault is function.

I corrected the above two and your form is now submitting. (Also take a look at regex I think it is not correct)

var namePattern = new RegExp("^([a-z]{4,20})$");

document.getElementById("registration_form").addEventListener("submit", function(event) {
  var fName = document.getElementById("fName").value;
  var lName = document.getElementById("lName").value;

  if (!namePattern.test(fName)) {
    document.getElementById("error_first_name").innerHTML = 'Wrong first name';
    event.preventDefault();
  } else if (!namePattern.test(lName)) {
    document.getElementById("error_last_name").innerHTML = 'Wrong last name';
    event.preventDefault();
  }
}, false)

<form action="" method="post" id="registration_form">
  <div class="register-top-grid">
    <h3>PERSONAL INFORMATION</h3>
    <div>
      <div id="error_first_name" style="color: #ff0000"></div>
      <span>First Name<label>*</label></span>
      <input type="text" name="fName" id="fName" placeholder="Your first name">
    </div>
    <div>
      <div id="error_last_name" style="color: #ff0000"></div>
      <span>Last Name<label>*</label></span>
      <input type="text" name="lName" id="lName" placeholder="Your last name">
    </div>
    <button type="submit">Submit</button>
</form>

Janice Zhong · Accepted Answer · 2018-09-23 14:38:25Z

JS:

var namePattern = new RegExp("^([A-z]{4,20})$");

document.getElementById("registration_form").addEventListener("submit", function(event){ //you have a syntax error here
    //you need to prevent the page reload after submitting the form
    event.preventDefault();
    var fName = document.getElementById("fName").value;
    var lName = document.getElementById("lName").value;

    if(!namePattern.test(fName)){
        document.getElementById("error_first_name").innerHTML = 'Wrong first name';
        event.preventDefault;
    }else if(!namePattern.test(lName)){
        document.getElementById("error_last_name").innerHTML = 'Wrong last name';
        event.preventDefault;
    }
}) //don't forget the closed parenthese

Output:

Collectives™ on Stack Overflow

Message output using innerHTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related