2

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>
reve berces
  • 349
  • 2
  • 11
  • Use `$("form").on("submit",function(e) { e.preventDefault(); ...` instead of clicking a submit button - the preventDefault is MANDATORY if you do not want to submit the form as well as performing the ajax – mplungjan Dec 03 '19 at 10:37
  • Does this answer your question? [How can I check the validity of an HTML5 form that does not contain a submit button?](https://stackoverflow.com/questions/12470622/how-can-i-check-the-validity-of-an-html5-form-that-does-not-contain-a-submit-but) or https://stackoverflow.com/questions/6658937/how-to-check-if-a-form-is-valid-programmatically-using-jquery-validation-plugin – freedomn-m Dec 03 '19 at 10:55
  • 1
    @freedomn-m unfortunately no. I've seen that before asking the question but it does not answer it, or maybe it does in some parts but I'm not proficient enough to know. – reve berces Dec 03 '19 at 10:57

2 Answers2

1

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>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
0
var password = $('#password').val();

if(password.lenth < 6){
 console.log("Length must be 6 character long");
 return false;
}
Nitin Raturi
  • 1,505
  • 1
  • 7
  • 12