ошибка проверки JQuery во время отправки формы

Question

Я сделал сценарий, как этот

$("#submit_butt").click(function(){ 
     $("#error_messgae").html(''); 
     //alert($("#deal_description").val().length); 

      if($("#deal_name").val()=="") { 
       var deal = "<li class='err-msg'>Deal Name is Blank</li>" ; 
       $("#error_messgae").html(deal); 
       $("#deal_name").css({'border':'1px solid red'}); 
      } else { 
       $("#deal_name").css({'border':''}); 
      } if($("#deal_price").val()==""){ 
       var price = "<li class='err-msg'>Deal Price is Blank</li>" ; 
       $("#error_messgae").append(price); 
       $("#deal_price").css({'border':'1px solid red'}); 
      }if(isNaN($("#deal_price").val())){ 
       var price_num = "<li class='err-msg'>Deal Price Should be a Number</li>" ; 
       $("#error_messgae").append(price_num); 
       $("#deal_price").css({'border':'1px solid red'}); 
      } else { 
       $("#deal_price").css({'border':''}); 
      } if($("#category").val()==""){ 
       var category = "<li class='err-msg'>Category is Blank</li>" ; 
       $("#error_messgae").append(category); 
       $("#category").css({'border':'1px solid red'}); 
      } else { 
       $("#category").css({'border':''}); 
      } if($("#deal_description").val()==""){ 
       var description = "<li class='err-msg'>Deal Description is Blank</li>" ; 
       $("#error_messgae").append(description); 
       $("#deal_description").css({'border':'1px solid red'}); 
      } if($("#deal_description").val().length<120){ 
       var description_new = "<li class='err-msg'>Deal Description Should be more the 120 Characters</li>" ; 
       $("#error_messgae").append(description_new); 
       $("#deal_description").css({'border':'1px solid red'}); 
      } else { 
       $("#deal_description").css({'border':''}); 
      } if($("#deal_instructions").val()==""){ 
       var instruction = "<li class='err-msg'>Deal Instruction is Blank</li>" ; 
       $("#error_messgae").append(instruction); 
       $("#deal_instructions").css({'border':'1px solid red'}); 
      } else { 
       $("#deal_instructions").css({'border':''}); 
      } if($("#deal_tags").val()==""){ 
       var tags = "<li class='err-msg'>Deal Tags is Blank</li>" ; 
       $("#error_messgae").append(tags); 
       $("#deal_tags").css({'border':'1px solid red'}); 
      } else { 
       $("#deal_tags").css({'border':''}); 
      } if($("#deal_days").val()==""){ 
       var deal_days = "<li class='err-msg'>Deal Days is Blank</li>" ; 
       $("#error_messgae").append(deal_days); 
       $("#deal_days").css({'border':'1px solid red'}); 
      } if($("#deal_days").val()!="" && isNaN($("#deal_days").val())){ 
       var deal_days_num = "<li class='err-msg'>Deal Days must be a Number</li>" ; 
       $("#error_messgae").append(deal_days_num); 
       $("#deal_days").css({'border':'1px solid red'}); 
      } else { 
       $("#deal_days").css({'border':''}); 
      } 


    }); 

Теперь я хочу представить свою форму, когда все в порядке. как это сделать?

Answer 1

Что, кажется, отсутствует в коде некоторые признаки того, была ли проверка успешно ВЗ нет.

Учитывая ваш текущий код, я бы поместил переменную var validated = true; в начало вашего обработчика click, а затем установите его в false каждый раз, когда одна из проверок проверки не выполняется. Например:

var validated = true; 

.... 

if($("#deal_name").val()=="") { 
    var deal = "<li class='err-msg'>Deal Name is Blank</li>" ; 
    $("#error_messgae").html(deal); 
    $("#deal_name").css({'border':'1px solid red'}); 
    validated = false; 
} 

В конце вашего click обработчика вы бы тогда return validated;. Если validated является ложным, представление не будет происходить, и наоборот.

Я предполагаю, что кнопка отправки предназначена для запуска фактического представления формы. Если нет, вам нужно будет справиться с этим соответствующим образом.

Answer 2

Вместо того, чтобы представить события нажатия кнопки вы можете изменить его, как показано ниже,

Sample пример, как показано ниже.

$('#FORM_ID').submit(function(){ 
    //validation code. 
});

ИЛИ

$(function() 
{ 
    //we bind to the form instead of the form button 
    //using .on() (jQ1.7+) 
    $('#FORM_ID').on('submit', function(e) 
    { 
     //prevent form submission 

     e.preventDefault(); 

     //do validation stuff 

     this.submit(); 
    }); 
});

ИЛИ

$(document).ready(function() 
{ 
    $('#submitBtn').click(function (e) 
    { 
     e.preventDefault(); 
     // Do validation stuff... 
     $('#FORM_ID').submit(); 
    }); 
});

Вы также можете использовать jQuery.validate плагин, который также обрабатывать данные формы.

Взгляните на этот Example

Answer 3

Вы можете попробовать это:

$("#submit_butt").click(function(){ 
    if($(':text').val()=='' && $('textarea').val()==''){ // all other inputs too 
     if($("#deal_name").val()=="") { 
      var deal = "<li class='err-msg'>Deal Name is Blank</li>" ; 
      $("#error_messgae").html(deal); 
      $("#deal_name").css({'border':'1px solid red'}); 
     } else { 
      $("#deal_name").css({'border':''}); 
     } if($("#deal_price").val()==""){ 
      var price = "<li class='err-msg'>Deal Price is Blank</li>" ; 
      $("#error_messgae").append(price); 
      $("#deal_price").css({'border':'1px solid red'}); 
     }if(isNaN($("#deal_price").val())){ 
      var price_num = "<li class='err-msg'>Deal Price Should be a Number</li>" ; 
      $("#error_messgae").append(price_num); 
      $("#deal_price").css({'border':'1px solid red'}); 
     } else { 
      $("#deal_price").css({'border':''}); 
     } if($("#category").val()==""){ 
      var category = "<li class='err-msg'>Category is Blank</li>" ; 
      $("#error_messgae").append(category); 
      $("#category").css({'border':'1px solid red'}); 
     } else { 
      $("#category").css({'border':''}); 
     } if($("#deal_description").val()==""){ 
      var description = "<li class='err-msg'>Deal Description is Blank</li>" ; 
      $("#error_messgae").append(description); 
      $("#deal_description").css({'border':'1px solid red'}); 
     } if($("#deal_description").val().length<120){ 
      var description_new = "<li class='err-msg'>Deal Description Should be more the 120 Characters</li>" ; 
      $("#error_messgae").append(description_new); 
      $("#deal_description").css({'border':'1px solid red'}); 
     } else { 
      $("#deal_description").css({'border':''}); 
     } if($("#deal_instructions").val()==""){ 
      var instruction = "<li class='err-msg'>Deal Instruction is Blank</li>" ; 
      $("#error_messgae").append(instruction); 
      $("#deal_instructions").css({'border':'1px solid red'}); 
     } else { 
      $("#deal_instructions").css({'border':''}); 
     } if($("#deal_tags").val()==""){ 
      var tags = "<li class='err-msg'>Deal Tags is Blank</li>" ; 
      $("#error_messgae").append(tags); 
      $("#deal_tags").css({'border':'1px solid red'}); 
     } else { 
      $("#deal_tags").css({'border':''}); 
     } if($("#deal_days").val()==""){ 
      var deal_days = "<li class='err-msg'>Deal Days is Blank</li>" ; 
      $("#error_messgae").append(deal_days); 
      $("#deal_days").css({'border':'1px solid red'}); 
     } if($("#deal_days").val()!="" && isNaN($("#deal_days").val())){ 
      var deal_days_num = "<li class='err-msg'>Deal Days must be a Number</li>" ; 
      $("#error_messgae").append(deal_days_num); 
      $("#deal_days").css({'border':'1px solid red'}); 
     } else { 
      $("#deal_days").css({'border':''}); 
     } 
    }else{ 
     // if passed then submit 
     $('form').submit(); 
    } 
});