jquery-<input type=‘submit‘/>--关于required必填字段校验不生效的问题解决方案


问题描述

当时,我正在通过jquery的ajax来完成添加表单的提交操作,在提交前需要对表单进行一些简单的非空判断。于是,对提交按钮绑定了一个点击事件click来发起$.post请求。但是,在出现空字段的输入时,表单依旧被提交到后台服务器,显然结果并不是我想要的。
</>
我创建了一个注册表单并将其input字段设置为require属性,但它不适用于 ajax

<div class="form-group">
    <input required  type="text" id="First_name" placeholder="Enter your First Name" value="" class="form-control login-field">
    <i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
    <input required  type="text" id="last_name" placeholder="Enter your Last Name" value="" class="form-control login-field">
    <i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
    <input required  type="text" id="reg_username" placeholder="Enter your User Name    " value="" class="form-control login-field">
    <i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
    <input required  type="email" id="email" placeholder="Enter your Email" value="" class="form-control login-field">
    <i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
    <input required  type="password" id="password" placeholder="Password" value="" class="form-control login-field">
    <i class="fa fa-lock login-field-icon"></i>
</div>
<a id="register" class="btn btn-success modal-login-btn">Sign up</button>

这是ajax代码

<script type="text/javascript">
$(document).ready(function(){
  $("#register").click(function(e){         
   if($("form").valid()){
      e.preventDefault();
   }
  var firstname=$('#First_name').val();
  var lastname=$('#last_name').val();
  var username=$('#reg_username').val();
  var password=$('#password').val();
  var email=$('#email').val();
  $.ajax({
    type: "POST",
    url: "doRegister.php",
    data: 
         "first_name=" +firstname+ "&last_name=" +lastname+ "&username="+ username+ "&password="+ password+ "&email="+ email ,
    success: function(html){
      document.write(html);
    }
  });
  return false;
});
});
</script>

原因分析:

由于click绑定的只是一个简单的点击事件,所以每次点击都会执行提交表单的操作,并没有按照表单中字段的校验结果来决定是否需要提交。


解决方案:

为了进行 html5 必填字段的验证需要使用submit事件而不是click。提交事件仅在成功验证后触发。

$(document).ready(function() {
  $("#register").submit(function(e) {
    //---------------^---------------
    e.preventDefault();
    var firstname = $('#First_name').val(),
      lastname = $('#last_name').val(),
      username = $('#reg_username').val(),
      password = $('#password').val(),
      email = $('#email').val();
    $.ajax({
      type: "POST",
      url: "doRegister.php",
      data: "first_name=" + firstname + "&last_name=" + lastname + "&username=" + username + "&password=" + password + "&email=" + email,
      success: function(html) {
        console.log(html);
      }
    });
    return false;

  });
});
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值