Question

我写了一个带有单个输入的表单，它接受用户的手机号码并验证它以0开头。验证工作正常，但问题是当我提交表单时它没有检查我的输入框的值并提交我的表格，即使字段无效。我想检查我的字段的验证以及何时有效，然后可以提交。

这是我的代码：

$('#mobili').focusout(function() {
  $('#mobili').filter(function() {
    var mobi = $('#mobili').val();
    var mobiback = $('#mobili');
    var mobilReg = /^([0][0-9]{10})$/;
    if (!mobilReg.test(mobi)) {
      $("#error-nwl").css('color', '#ff6666');
      $("#error-nwl").text("Enter valid mobile number (begin with 0)");
    } else {
      $("#error-nwl").css('color', '#66cc66');
      $("#error-nwl").text("ok");
    }
  })
});

$(".newslside").submit(function(e) {
  var url = "page2.html";
  alert("Submitted");
  $.ajax({
    type: "POST",
    url: url,
    data: $(".newslside").serialize(),
    success: function(data) {
      $(".errori").html(data),
        alert("Submitted");
    }
  });
  e.preventDefault();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="error-nwl"></div>
<form action="" method="post" name="myForm" class="newslside">
  <input type="text" placeholder="Mobile" name="mobile" id="mobili" maxlength="11" required />
  <br/>
  <button class="submitnews" type="submit">send</button>
</form>

由于

Answer 1

希望这会奏效，

$('#mobili').focusout(function() {
   $('#mobili').filter(function() {
   var mobi = $('#mobili').val();
   var mobiback = $('#mobili');
   var mobilReg = /^([0][0-9]{10})$/;
   if (!mobilReg.test(mobi)) {
      $("#error-nwl").css('color', '#ff6666');
      $("#error-nwl").text("Enter valid mobile number (begin with 0)");
   } else {
      $("#error-nwl").css('color', '#66cc66');
      $("#error-nwl").text("ok");
   }
 })
});

$(".newslside").submit(function(e) {

     var mobi = $('#mobili').val();
     var mobiback = $('#mobili');
     var mobilReg = /^([0][0-9]{10})$/;
     if (!mobilReg.test(mobi)) {
         $("#error-nwl").css('color', '#ff6666');
         $("#error-nwl").text("Enter valid mobile number (begin with 0)");
         return false;
     }else{
         var url = "page2.html";
         alert("Submitted");
         $.ajax({
            type: "POST",
            url: url,
            data: $(".newslside").serialize(),
            success: function(data) {
               $(".errori").html(data),
               alert("Submitted");
            }
         });
    }
       e.preventDefault();
 });

Answer 2

试试这个 -

＆＃13;

$(document).ready(function(){
$(".newslside").submit(function(e) { var url = "page2.html";
  alert("Submitted");
$.ajax({ type: "POST", url: url, data: $(".newslside").serialize(),
 success: function(data) { $(".errori").html(data),
   alert("Submitted");
  } }); e.preventDefault();

 }); 
  
     $('#mobili').filter(function() {
        var mobi = $('#mobili').val();
        var mobiback = $('#mobili');
        var mobilReg = /^([0][0-9]{10})$/;
        if (!mobilReg.test(mobi)) {
            $("#error-nwl").css('color', '#ff6666');
            $("#error-nwl").text("Enter valid mobile number (begin with 0)");
        } else {
            $("#error-nwl").css('color', '#66cc66');
            $("#error-nwl").text("ok");
        }
    })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="error-nwl"></div>
    <form action="" method="post" name="myForm" class="newslside">
    <input pattern="[0-9]{10}" type="text" placeholder="Mobile" name="mobile" id="mobili" maxlength="11" required /><br/>
    <input type="submit" class="submitnews" value="Send"/>
    </form>

＆＃13;

Answer 3

我使用了HTML onsubmit属性，这有效，希望它适合你

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script type="text/javascript">
    function validate() {
        var mobi = $('#mobili').val();
        var mobilReg = /^([0][0-9]{10})$/;
        if (!mobilReg.test(mobi)) {
            $("#error-nwl").css('color', '#ff6666');
            $("#error-nwl").text("Enter valid mobile number (begin with 0)");
            return false;
        } else {
            $("#error-nwl").css('color', '#66cc66');
            $("#error-nwl").text("ok");
            var url = "page2.html";
            alert("Submitted");
            $.ajax({
                type: "POST",
                url: url,
                data: $(".newslside").serialize(),
                success: function(data) {
                    $(".errori").html(data),
                    alert("Submitted");
                }
            });
            e.preventDefault();
        }
    }
    </script>
</head>
<body>
    <div id="error-nwl"></div>
    <form action="" method="post" name="myForm" class="newslside"  onsubmit="return(validate());">
        <input type="text" placeholder="Mobile" name="mobile" id="mobili" maxlength="11" required />
        <br/>
        <button class="submitnews" type="submit">send</button>
    </form>
</body>
</html>

Answer 4

            <html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        </head>
        <body>
            <div id="error-nwl"></div>
            <form action="" method="post" name="myForm" class="newslside">
            <input type="text" placeholder="Mobile" name="mobile" id="mobili" maxlength="11" required /><br/>
            <button class="submitnews" type="submit">send</button>
            </form>
        <script>
        var valid = false;
        function focusout()
        {
        $('#mobili').focusout(function() {
            $('#mobili').filter(function() {
                var mobi = $('#mobili').val();
                var mobiback = $('#mobili');
                var mobilReg = /^([0][0-9]{10})$/;
                if (!mobilReg.test(mobi)) {
                    $("#error-nwl").css('color', '#ff6666');
                    $("#error-nwl").text("Enter valid mobile number (begin with 0)");
                    valid = false;
                } else {
                    $("#error-nwl").css('color', '#66cc66');
                    $("#error-nwl").text("ok");
                    valid = true;
                }
            })
        });

        }
        focusout();
        </script>
        <script>
        $(".newslside").submit(function(e) { 
        focusout();
        if(!valid )
        {
            return false;
        }
        var url = "page2.html";
          alert("Submitted");
        $.ajax({ type: "POST", url: url, data: $(".newslside").serialize(),
         success: function(data) { $(".errori").html(data),
           alert("Submitted");
          } }); e.preventDefault();

         }); 
        </script>

        </body>
        </html>

Answer 5

验证jquery的onsubmit函数中的字段。并在表单标记中添加return false。

当字段值无效时表单提交

5 个答案: