javascript - html验证后ajax提交

Question

当我点击提交按钮时，我的ajax登录表单遇到了一些问题，它在提交ajax之前没有验证表单，它只是提交表单，我哪里出错了

这是ajax脚本

    function wa_login() {
        var wa_username = $('#wa_username').val();
        var wa_password = $('#wa_password').val();
        var datas = 'wa_username=' + wa_username + '&wa_password=' + wa_password;

        $.ajax({
            type: 'POST',
            url: '/limitless/functions.php',
            data: datas
        })
        .done(function (data) {
            $('#info').html(data);
        });
    }

这是表单本身

<form class='form-horizontal form-validate-jquery' action='#' novalidate='novalidate'>
<div class='text-center'>
<div class='icon-object border-slate-300 text-slate-300'><i class='icon-reading'></i></div>
<h5 class='content-group'>Login to your account <small class='display-block'>Enter your credentials below</small></h5>
    </div>

<div class='form-group has-feedback has-feedback-left'>
<input type='text' class='form-control' placeholder='Username' id='wa_username' required='required'>
 <div class='form-control-feedback'>
            <i class='icon-user text-muted'></i>
        </div>
    </div>

    <div class='form-group has-feedback has-feedback-left'>
        <input type='password' class='form-control' placeholder='Password' id='wa_password' required='required'>
        <div class='form-control-feedback'>
            <i class='icon-lock2 text-muted'></i>
        </div>
    </div>

    <div class='form-group'>
        <button type='submit' onclick='wa_login()'   class='btn btn-primary btn-block'>Sign in <i class='icon-circle-right2 position-right'></i></button>
    </div>

    <div class='text-center'>
        <a href='reset'>Forgot password?</a> | <a href='register' >Sign Up</a>
    </div>
    </form>

Answer 1

您需要做的是使用 jQuery 捕获表单提交事件，如下所示:

$('#form').on('submit',function(event){
  
  event.preventDefault(); // prevent default behavior
  
  if(formIsValid()){  // Execute validations in formIsValid() function
                      // returning true if valid, false if not
    $.ajax({
            type: 'POST',
            url: '/limitless/functions.php',
            data: $(this).serialize() // automatically serializing form
        })
        .done(function (data) {
            $('#info').html(data);
    });
  } else{
    console.log('Sorry, wrong login credentials');
  }
  
  function formIsValid(){
    // Always returning false to show how submit is not called
    return false;
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Notice that an id is added to your form -->
<form id="form" class='form-horizontal form-validate-jquery' action='#' novalidate='novalidate'>
<div class='text-center'>
<div class='icon-object border-slate-300 text-slate-300'><i class='icon-reading'></i></div>
<h5 class='content-group'>Login to your account <small class='display-block'>Enter your credentials below</small></h5>
    </div>

<div class='form-group has-feedback has-feedback-left'>
<input type='text' class='form-control' placeholder='Username' id='wa_username' required='required'>
 <div class='form-control-feedback'>
            <i class='icon-user text-muted'></i>
        </div>
    </div>

    <div class='form-group has-feedback has-feedback-left'>
        <input type='password' class='form-control' placeholder='Password' id='wa_password' required='required'>
        <div class='form-control-feedback'>
            <i class='icon-lock2 text-muted'></i>
        </div>
    </div>

    <div class='form-group'>
        <button type='submit' class='btn btn-primary btn-block'>Sign in <i class='icon-circle-right2 position-right'></i></button>
    </div>

    <div class='text-center'>
        <a href='reset'>Forgot password?</a> | <a href='register' >Sign Up</a>
    </div>
</form>

观察控制台日志，您必须看到一条有关错误登录凭据的警报消息。希望对您有帮助!