Question posted in
You can find the official documentation here.

Jquery ajax – check for character length before saving via ajax

I’m using pattern to check for character length before saving using form tag with

pattern=".{6,}" oninvalid="this.setCustomValidity('Password must be 6 atleast characters')"

but that doesnt work when I’m saving using ajax/jquery. it directly saves the text without checking for character length/ pattern

this is my form and ajax/jquery (it’s inside a modal)

<div style="text-align:center;">
                          <div style="display:inline-block">
                               <input type="password" id="password" class="my-2 form-control"  
placeholder="Type password" name="" pattern=".{6,}" oninvalid="this.setCustomValidity('Password must be 
6 atleast characters')" required><br>
                               <input type="password" id="confirm_password" class="mt-2 form-control" 
onclick="repass()" placeholder="Retype password" name="" pattern=".{6,}" 
oninvalid="this.setCustomValidity('Password must be 6 atleast characters')" required><br>
                               <span id='message'></span>
                          </div>
                     </div>

                </div>
                <div class="modal-footer">
                   <button type="submit" name="submit" class="btn btn-primary" id="submit_password" disabled>Change Password</button>
                 <a href="admin_logout.php">
                   <button type="button" class="btn btn-danger">Logout</button>
                 </a>
                </div>

<script>
    function repass(){

         $('#password, #confirm_password').on('keyup keydown', function () {
         if ($('#password').val() == $('#confirm_password').val()) {
         $('#message').html(' ').css('color', 'red');
         $('#submit_password').attr("disabled", false);
    } else{
         $('#submit_password').attr("disabled", true);
         $('#message').html('Password does not match').css('color', 'red');
         }
         // if (($('#password').val()) == null) {
         //      $('#message').html(' ').css('color', 'red');
         //      $('#submit_password').attr("disabled", true);
         //
         // }
    });
}
    </script>
     <script>
        $("#submit_password").click(function(e) {
            // e.preventDefault();
            var password = $('#password').val();
            $.ajax({
                type: 'POST',
                data: {password:password},
                url: 'change_pass.php',
                success: function(data) {
                    // alert(data);
                    swal( {
                       title: "SUCCESS!", text: "Password changed!", icon: "success", timer: 1800, button: false,
                   }
                   );
                   $('#change_pass').modal('hide');
                }
            });
        });
     </script>
Tags:

2

Answers


  1. 0 
    var password = $('#password').val();

if(password.lenth < 6){
 console.log("Length must be 6 character long");
 return false;
}
    Login or Signup to reply.
  2. 0

    The reason the validation rules don’t appear is because your inputs are not contained within a form, and you do not submit that form. If you correct that, your code will work.

    Also note that you can improve the HTML by removing the inline event handlers and attaching them unobtrusively. Try this:

    $('#password, confirm_password').on('invalid', function(e) {
  this.setCustomValidity(e.target.validity.patternMismatch ? 'Password must be 6 atleast characters' : '');
});

$('#password, #confirm_password').on('keyup keydown', function() {
  if ($('#password').val() === $('#confirm_password').val()) {
    $('#message').html(' ');
    $('#submit_password').attr("disabled", false);
  } else {
    $('#submit_password').attr("disabled", true);
    $('#message').html('Password does not match');
  }
});

$("#yourForm").on('submit', function(e) {
  var password = $('#password').val();

  $.ajax({
    type: 'POST',
    data: {
      password: password
    },
    url: 'change_pass.php',
    success: function(data) {
      // success actions...
    }
  });
});
    #message {
  color: red;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" id="yourForm">
  <div style="text-align:center;">
    <div style="display:inline-block">
      <input type="password" id="password" class="my-2 form-control" placeholder="Type password" name="" pattern=".{6,}" required><br>
      <input type="password" id="confirm_password" class="mt-2 form-control" placeholder="Retype password" name="" pattern=".{6,}" required><br>
      <span id='message'></span>
    </div>
  </div>
  <div class="modal-footer">
    <button type="submit" name="submit" class="btn btn-primary" id="submit_password" disabled>Change Password</button>
    <a href="admin_logout.php">
      <button type="button" class="btn btn-danger">Logout</button>
    </a>
  </div>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search