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为false，则不会发生提交，反之亦然。

我假设提交按钮旨在触发表单的实际提交。如果没有，你需要妥善处理。

Answer 2

您可以按照以下方式更改提交按钮点击事件，

示例示例如下。

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

表单提交期间的jquery验证错误

3 个答案: