Home Validate form data
Reply: 1

Validate form data

Lugifah
1#
Lugifah Published in 2018-02-14 00:09:57Z

This question already has an answer here:

  • jQuery Validate remote method usage to check if username already exists 2 answers

I have a form that that is already validated by jquery.validate.min.js, what I want is another validation method, ajax call to mysql to check if the email address is already in my DB. How do I merge the validations? I already played a little with the codes but can't figure it out.

My form: http://demos.creative-tim.com/wizard-demo-register?_ga=2.138099576.979789193.1518540669-1813170823.1518540669

My validation code:

$('document').ready(function() {
  var email_state = false;
  $('#email').on('blur', function() {
    var email = $('#email').val();
    if (email == '') {
      email_state = false;
      return;
    }
    $.ajax({
      url: 'index.php',
      type: 'post',
      data: {
        'email_check': 1,
        'email': email,
      },
      success: function(response) {
        if (response == 'taken') {
          email_state = false;
          alert('email is taken');
        } else if (response == 'not_taken') {
          email_state = true;
          alert('email available');
        }
      }
    });
  });
});

The PHP who process the email check:

        <?php
      $db = mysqli_connect('localhost', 'user', 'pass', 'subscribers');
      if (isset($_POST['email_check'])) {
        $email = $_POST['email'];
        $sql = "SELECT * FROM subscribers WHERE email='$email'";
        $results = mysqli_query($db, $sql);
        if (mysqli_num_rows($results) > 0) {
          echo "taken";
        }else{
          echo 'not_taken';
        }
        exit();
      }
      ?>
bntzio
2#
bntzio Reply to 2018-02-15 17:17:13Z

Take a look at json_encode what you need to do is return a response (ex: true or false) to javascript from php (check this answer) .

Then check in the success js function the response, if it is true, then the email is already in the database, and alert the user, otherwise, submit the form with the email value.

There are two ways to accomplish this, 1) Make an ajax request for every keystroke on the email field $('#email-input').on('keyup')and once the response is false, enable the submit button via jquery $('#submit-button').prop('disabled', false) note that in your button html tag you should have the disabled property by default <input type="submit" id="submit-button" value="Submit" disabled /> and after the validation occurs you disable it, then it's going to be clickable and the user will be able to submit the form.

The problem is, that you're going to make a lot of ajax calls when the user types in the email address, and you don't want that, instead what you can do is to just make the request when the user submit the form (click on the submit button) and then prevent the default behaviour (sending a post request via form) for you to check via ajax if the email is already in use or not, if it is, do not submit the form and display a message, otherwise, submit the form.

<form id="form" action="http://foo.com" method="post">...</form>

$('#form').on('submit', function (ev) {
  ev.preventDefault() // prevent default behaviour (making a post request)
  // do your ajax call here to check the email availability
  // if it's taken, do nothing and just display a message to the user
  // otherwise, submit the form: $(this).submit()
})

Cheers.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.348044 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO