Форма отправить, когда значение поля недействительно

Я написал форму с одним входом, который берет мобильный номер пользователя и проверяет его, начиная с 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>

Благодаря

источник

2016-10-04 Anonymous

использование типа ввода отправить для вашей кнопки – Chetan

использовать 'return false' в' if' состоянии. Место, где вы написали валидацию. – Samir

Ваша проверка должна быть внутри события 'submit '. не вне сторона. Если он неактивен, тогда 'return false'. Else сделать вызов Ajax – Samir

Надеются, что это будет работать,

$('#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(); 
});

источник

2016-10-04 09:06:27 Samir

Попробуйте -

$(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"); 
 
     } 
 
    }) 
 
});

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

источник

2016-10-04 09:07:18 Chetan

Я использовал атрибут 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>

источник

2016-10-04 09:14:58 Aks1357

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

источник

2016-10-04 09:20:22 Arun

Validate, что поле внутри onsubmit функции JQuery. И добавьте return false в свой тег формы.

источник

2016-10-04 09:23:11

Форма отправить, когда значение поля недействительно

ответ

Смежные вопросы