如何在不刷新页面的情况下使用表单进行验证？

我正在使用jQuery进行手机号码验证，但没有页面刷新提交按钮，但它不工作，当我点击提交按钮。但页面刷新它的作品。如何在不刷新页面的情况下使用表单进行验证？

这里是我的代码：

的index.html

<html> 
    <head> 
     <title>Submit Form Without Refreshing Page</title> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
     <link rel="stylesheet" href="css/refreshform.css" /> 
     <script src="js/fresh.js"></script> 

    </head> 
    <body> 
     <div id="mainform"> 

      <!-- Required div starts here --> 

      <form id="form"> 

       <label>First Name:</label> 
       <br/> 
       <input type="text" id="fname" placeholder="First Name"/><br/> 
       <br/> 
       <label>Last Name:</label> 
       <br/> 
       <input type="text" id="lname" placeholder="Last Name"/><br/> 
       <br/> 
       <label>MobliNo:</label> 
       <br/> 
       <input type="text" id="mobile" placeholder="Your MobNo"/><br/> 
       <br/> 
       <label>ConfirmMobliNo:</label> 
       <br/> 
       <input type="text" id="remobile" placeholder="Confirm MobNo"/><br/> 
       <br/> 
       <label>Email:</label> 
       <br/> 
       <input type="text" id="email" placeholder="Your Email"/><br/> 
       <br/> 
         <input type="button" id="submit" value="Submit" onclick = "return Validate()"/> 
      </form> 
      </div> 
    </body> 
</html>

refresh.js

$(document).ready(function(){ 
$("#submit").click(function(){ 
var fname = $("#fname").val(); 
var lname = $("#lname").val(); 
var mobile = $("#mobile").val(); 
var remobile = $("#remobile").val(); 
var email = $("#email").val(); 


// Returns successful data submission message when the entered information is stored in database. 
$.post("refreshform.php",{ fname1: fname, lname1: lname, mobile1: mobile, remobile1: remobile, email1: email}, 
      function(data) { 
      alert(data); 
      $('#form')[0].reset(); //To reset form fields 
      }); 


}); 
}); 

function Validate() { 
     var mobile = document.getElementById("mobile").value; 
     var pattern = /^\d{10}$/; 
     if (pattern.test(mobile)) { 
      alert("Your mobile number : " + mobile); 
      return true; 
     } 
     alert("It is not valid mobile number.input 10 digits number!"); 
     return false; 
    }

我应该怎么做，以实现无页面验证刷新？

来源

2014-08-30 sheetal sharma

用稍微不同的方式做。从按键上移开

onclick = "return Validate()"

，并把该点击功能里面这样

$("#submit").click(function(){ 
    var valid = Validate(); 
    if(valid){ 
    /// Then your rest of process here. 
    } 
});

希望工程。

这将只是检查电话号码是否有10位

function Validate() { 
    var mobile = document.getElementById("mobile").value; 
    var remobile = document.getElementById("remobile").value; 

    if(isNaN(mobile) || isNaN(remobile)){ 
     alert("Invalid. Mobile and re mobile should be numbers only."); 
     return false; 
    } 
    if(mobile.length != 10){ 
     alert("Invalid number. It should be 10 digits only."); 
     return false; 
    } 
    if(remobile.length != 10){ 
     alert("Invalid Re mobile number. It should be 10 digits only."); 
     return false; 
    } 

    if(mobile != remobile){ 
     alert("Mobile and remobile does not match!"); 
     return false; 
    } 

    alert("Valid Number."); 
    return true; 
}

来源

2014-08-30 05:14:30

如果你只是按在窗体的文本字段 – 2014-08-30 05:15:16

回车键，我强烈建议不附带提交事件处理程序提交按钮，而是做'$（这将无法工作“＃（“submit”，function（）{' – mplungjan 2014-08-30 05:16:17

@Lashane但他有输入类型的按钮没有提交，所以我认为表单不会提交输入 – 2014-08-30 05:17:28

在你形成使用：

<form id="form" onsubmit="return Validate();">

和按钮即可提交：

<input type="submit" id="submit" value="Submit" />

在你的JS验证代码代替return true

var fname = $("#fname").val(); 
var lname = $("#lname").val(); 
var mobile = $("#mobile").val(); 
var remobile = $("#remobile").val(); 
var email = $("#email").val(); 


// Returns successful data submission message when the entered information is stored in database. 
$.post("refreshform.php",{ fname1: fname, lname1: lname, mobile1: mobile, remobile1: remobile, email1: email}, 
      function(data) { 
      alert(data); 
      $('#form')[0].reset(); //To reset form fields 
      }); 

return false;

在这种情况下，你会提交表单，而不刷新页面

来源

2014-08-30 05:14:33

@mplungjan原始验证功能 – 2014-08-30 05:21:13

啊，我混合了你和另一个答案，因为我期望内联处理程序被删除 – mplungjan 2014-08-30 05:29:49

$("#submit").click(function(){ 
    var fname = $("#fname").val(); 
    var lname = $("#lname").val(); 
    var mobile = $("#mobile").val(); 
    ....

应该

$('#form').submit(function(event){ 
    event.preventDefault(); 

    if (Validate()) 
    { 
    // Do the posting 
    var fname = $("#fname").val(); 
    var lname = $("#lname").val(); 
    var mobile = $("#mobile").val(); 
    ....

或*）

$('#form').on('submit', function(event){ 
    event.preventDefault(); 

    if (Validate()) 
    { 
    // Do the posting 
    var fname = $("#fname").val(); 
    var lname = $("#lname").val(); 
    var mobile = $("#mobile").val(); 
    ....

通过包括event.preventDefault()在事件处理程序，阻止触发ev的元素的默认操作ent。在这种情况下，默认操作是提交表单，所以如果没有这种更改，表单仍然会以正常方式提交，通过AJAX提交。

*）附注：on对绑定事件更灵活一些。您也可以指定一个选择器作为第二个参数。这样，您可以在文档（或另一个包含元素）中设置事件处理程序，该处理程序将自动在与给定选择器匹配的任何子元素上调用事件。如果您有添加或删除元素的动态页面，这非常有用，因为每次添加元素时都不必添加事件处理程序。在这种特殊情况下，这并不重要，但我想我会让你知道的。对于语法是：

$(document).on('submit', '#form', function(event){

来源

2014-08-30 05:15:07 GolezTrol

这不会工作，如果你只是在窗体的文本字段中按回车键 – 2014-08-30 05:15:40

-2

function Validate() { 
    var mob = /^[1-9]{1}[0-9]{9}$/; 
    if (mob.test($.trim($("#<%=mobile.ClientID %>").val())) == false) { 
    alert("Please enter valid mobile number."); 
    $("#<%=mobile.ClientID %>").focus(); 
    return false; 
}

来源

2014-08-30 05:35:01

这是什么'$（“＃< ％= mobile.ClientID％>“）。focus（）;'??? – 2014-08-30 05:42:28

这是调用文本框移动输入ID。 – 2014-08-30 06:20:41

如何在不刷新页面的情况下使用表单进行验证？

回答

相关问题