验证表单数据[重复]

Question

This question already has answers here:

                </div>
            </div>
                    <div class="grid--cell mb0 mt4">
                        <a href="/questions/16577120/jquery-validate-remote-method-usage-to-check-if-username-already-exists" dir="ltr">jQuery Validate remote method usage to check if username already exists</a>
                            <span class="question-originals-answer-count">
                                (2 answers)
                            </span>
                    </div>
            <div class="grid--cell mb0 mt8">Closed <span title="2018-02-14 17:10:28Z" class="relativetime">2 years ago</span>.</div>
        </div>
    </aside>

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();
      }
      ?>

</div>

Answer 1

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.