jquery - フォーム送信時の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

送信ボタンクリックイベントの代わりに、以下のように変更できます。

サンプル例は以下の通りです。

$('#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プラグインを使用することもできます。

この例を見てください

Answer 2

これを試すことができます：

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