CODEWITHSUNDEEP
javascriptjquery
Joby Mathews
Joby Mathews

Reputation: 259

Javascript error during validation

I want to validate the form when submit button clicked . Here in this case form is submitting if validation returns error.I dont know much about js. Any help is appreciable.

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
  }
}
<form action="<?php echo site_url().'/login_controller/registration' ?>" role="form" enctype="multipart/form-data" onsubmit='check();' method="POST">
  <div class="form-group">
    <label><b>Password</b></label>
    <input type="password" class="form-control" placeholder="Password" id="password" name="psw" required>

  </div>
  <div class="form-group">
    <label><b>Repeat Password</b></label>
    <input type="password" class="form-control" placeholder="Repeat Password" id="confirm_password" name="rpsw" required>
    <span id='message'></span>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" name="submit" value="save">
  </div>
</form>

Upvotes: 1

Views: 70

Answers (5)

user6778410
user6778410

Reputation:

For form validations, its better using Jquery validation plugin. It is very simple and needs Jquery library included in it. Try this https://jqueryvalidation.org/. Please refer this js fiddle also https://jsfiddle.net/jfc62uof/6/

    <form action="javascript:void(0)" id="myform" role="form" enctype="multipart/form-data" method="POST">
      <div class="form-group">
        <label><b>Password</b></label>
        <input type="password" class="form-control" placeholder="Password" name="psw" id="psw">

      </div>
      <div class="form-group">
        <label><b>Repeat Password</b></label>
        <input type="password" class="form-control" placeholder="Repeat Password" name="rpsw">
        <span id='message'></span>
      </div>
      <div class="form-group">
        <input type="submit" class="btn btn-primary" name="submit" value="save">
      </div>
    </form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
    <script>

        $("#myform").validate({
          rules: {
            psw: {
              required: true
            },
            rpsw: {
              equalTo: "#psw"
            }

          }
        });
    </script>

Upvotes: 0

adeltahir
adeltahir

Reputation: 1097

You need to return true or false from the check() function to indicate whether to proceed or prevent the form submission.

Here's the updated check() function.

var check = function() {
      if (document.getElementById('password').value ==
          document.getElementById('confirm_password').value) {
          document.getElementById('message').style.color = 'green';
          document.getElementById('message').innerHTML = 'matching';
          return true;
      } else {
          document.getElementById('message').style.color = 'red';
          document.getElementById('message').innerHTML = 'not matching';
          return false;
      }
  }
<form action="<?php echo site_url().'/login_controller/registration' ?>" role="form" enctype="multipart/form-data" onsubmit='return check();' method="POST">
<div class="form-group">
    <label><b>Password</b></label>
    <input type="password" class="form-control" placeholder="Password" id="password" name="psw" required>

  </div>
  <div class="form-group">
    <label><b>Repeat Password</b></label>
    <input type="password" class="form-control" placeholder="Repeat Password" id="confirm_password" name="rpsw" required>
    <span id='message'></span>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" name="submit" value="save">
  </div>
</form>

Here's additional update in the html. Replace onsubmit='check();' with onsubmit='return check();' in the form opening tag.

Upvotes: 2

Hanif
Hanif

Reputation: 3797

Modify your script like following:

var check = function() {

  var error_flag = true;    

  if (document.getElementById('password').value == document.getElementById('confirm_password').value) {
      document.getElementById('message').style.color = 'green';
      document.getElementById('message').innerHTML = 'matching';
      error_flag = true;
  } else {
      document.getElementById('message').style.color = 'red';
      document.getElementById('message').innerHTML = 'not matching';
      error_flag = false;
  }

  return error_flag
}

Also little bit adjustment here: onsubmit='return check();'

<form action="<?php echo site_url().'/login_controller/registration' ?>" role="form" enctype="multipart/form-data" onsubmit='return check();' method="POST">

Upvotes: 0

mplungjan
mplungjan

Reputation: 177786

  1. Never call anything submit in a form, it hides the submit event handler
  2. You need to use onsubmit="return check()" and then
  3. return false from the function.
var check = function() {
  if (document.getElementById('password').value ==
      document.getElementById('confirm_password').value) {
      document.getElementById('message').style.color = 'green';
      document.getElementById('message').innerHTML = 'matching';
      return true;
  }
  // no need for else after a return:
  document.getElementById('message').style.color = 'red';
  document.getElementById('message').innerHTML = 'not matching';
  return false;
}

It is generally better to use unobtrusive coding, so give your form an ID and try

window.onload=function() {
  document.getElementById("myForm").onsubmit=function() {
    if (document.getElementById('password').value ==
      document.getElementById('confirm_password').value) {
      document.getElementById('message').style.color = 'green';
      document.getElementById('message').innerHTML = 'matching';
      return true;
    }
    // no need for else after a return:
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
    return false;
  }
}

Upvotes: 1

Pedram
Pedram

Reputation: 16575

Use e.preventDefault(); when password not matched.

$('form').submit(function(e){

  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
    e.preventDefault();
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" role="form" enctype="multipart/form-data" method="POST">
  <div class="form-group">
    <label><b>Password</b></label>
    <input type="password" class="form-control" placeholder="Password" id="password" name="psw" required>

  </div>
  <div class="form-group">
    <label><b>Repeat Password</b></label>
    <input type="password" class="form-control" placeholder="Repeat Password" id="confirm_password" name="rpsw" required>
    <span id='message'></span>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" name="submit" value="save">
  </div>
</form>

Upvotes: 1

Related Questions