Question

我在 submit 按钮上使用jQuery进行手机号码验证而没有页面刷新，但是当我点击 submit 按钮时它不起作用。但是通过页面刷新它可以工作。

这是我的代码：

的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;
    }

如果没有页面刷新，我该怎么做才能实现验证？

Answer 1

$("#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()，可以阻止触发事件的元素的默认操作。在这种情况下，默认操作是提交表单，因此如果没有此更改，表单仍将以正常方式提交，在通过AJAX提交后。

*）旁注： on对绑定事件更灵活一些。您还可以将选择器指定为第二个参数。这样，您可以在文档（或其他包含元素）中设置事件处理程序，该事件处理程序将自动调用与给定选择器匹配的任何子元素上的事件。如果您有动态页面添加或删除元素，这将非常有用，因为您不必在每次添加元素时添加事件处理程序。在这个特殊情况下，它不会有太大影响，但我想我会告诉你。其语法是：

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

Answer 2

以略微不同的方式做到这一点。删除

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;
}

Answer 3

在你的表格中使用：

<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;

在这种情况下，您将提交没有页面刷新的表单

Answer 4

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;
}

如何在没有页面刷新的情况下使用表单验证？

4 个答案: