不工作在JQuery中提交

Question

我有以下提交表格的代码：

$('.nav_step ul li').live('click', function(event){
    $( "#"+where_it ).submit();
    event.preventDefault();
});

HTML

<div class="row nav_step">
    <ul>
        <li class="first">
            <a href="/~162/appsite/requirement/index.html">
                <span class="left_bg">
                    <span class="right_bg">
                        <span class="center_bg">
                            <span class="namber_box">1</span>&nbsp;Requirements
                        </span>
                    </span>
                </span>
            </a>
        </li>
        <li class="">
            <a href="/~162/appsite/profile/index.html">
                <span class="left_bg">
                    <span class="right_bg">
                        <span class="center_bg">
                            <span class="namber_box">2</span>&nbsp;Profile
                        </span>
                    </span>
                </span>
            </a>
        </li>
        <li class="">
            <a href="/~162/appsite/assets/index.html">
                <span class="left_bg">
                    <span class="right_bg">
                        <span class="center_bg">
                            <span class="namber_box">3</span>&nbsp;Assets
                        </span>
                    </span>
                </span>
            </a>
        </li>
        <li class="active">
            <a href="/~162/appsite/liability/index.html">
                <span class="left_bg">
                    <span class="right_bg">
                        <span class="center_bg">
                            <span class="namber_box">4</span>&nbsp;Liabilities
                        </span>
                    </span>
                </span>
            </a>
        </li>
        <li class="">
            <a href="/~162/appsite/third/index.html">
                <span class="left_bg">
                    <span class="right_bg">
                        <span class="center_bg">
                            <span class="namber_box">5</span>&nbsp;Third&nbsp;Parties
                        </span>
                    </span>
                </span>
            </a>
        </li>
        <li class="">
            <a href="/~162/appsite/compliance/index.html">
                <span class="left_bg">
                    <span class="right_bg">
                        <span class="center_bg">
                            <span class="namber_box">6</span>&nbsp;Compliance
                        </span>
                    </span>
                </span>
            </a>
        </li>
        <li class="">
            <a href="/~162/appsite/document/index.html">
                <span class="left_bg">
                    <span class="right_bg">
                        <span class="center_bg">
                            <span class="namber_box">7</span>&nbsp;Documents
                        </span>
                    </span>
                </span>
            </a>
        </li>
        <li class="last">
            <a href="/~162/appsite/document/result.html">
                <span class="left_bg">
                    <span class="right_bg">
                        <span class="center_bg">
                            <span class="namber_box">8</span>&nbsp;Submit
                        </span>
                    </span>
                </span>
            </a>
        </li>
    </ul>
</div>

<form class="form-vertical" id="client-liability-form" action="/~162/appsite/liability/update.html" method="post">
<div style="display:none"><input type="hidden" value="ccc127985bc916e7ee507b4a238173097edf2338" name="YII_CSRF_TOKEN"></div>        <fieldset>
            <div class="large-15 columns button_holder">
                <div class="indent_holder_2">
                    <strong class="btn_previous movePrev"><a href="#">Previous</a></strong>
                    <strong class="btn_save moveSave"><a href="#">Save</a></strong>
                    <strong class="btn_next moveNext"><a href="#">Next</a></strong>
                </div>
            </div>
            <div id="itemsHolder" class="liability">

<div class="large-15 columns box_bg_holder_2 iner_2 liabilityBlock" rel="0">
    <div class="indent_holder">
        <div class="row indent_5">
            <div class="large-3 columns">
                <div class="row_label_2">
                    <label></label>
                </div>
                <div class="row_input">
                    <select class="select_box_2 selectLiability" name="ApplicationLiability[0][item_type]" id="ApplicationLiability_0_item_type">
<option value="0" selected="selected">Property Loan</option>
<option value="1">Credit Card</option>
<option value="2">Car Lease</option>
<option value="3">Personal Loan</option>
<option value="4">Other</option>
</select><span class="required_field_text" id="ApplicationLiability_item_type_em_" style="display: none"></span>
                </div>
            </div>
            <div class="large-3 columns">
                <div class="row_label">
                    <label for="ApplicationLiability_address">Address</label>                </div>
                <div class="row_input">
                    <input class="input_box_2" name="ApplicationLiability[0][address]" id="ApplicationLiability_0_address" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_address_em_" style="display: none"></span>
                </div>
            </div>
            <div class="large-6 columns">
                <div class="row_label_2">
                    <label></label>
                </div>
                <div class="row_input top_margin">
                    <div class="row_input_4">
                        <span class="ownership_text" rel="0"><a href="#">Ownership</a></span>
                    </div>
                    <div class="row_input_4">
                        <strong class="hint_holder iner">
                            <a href="#" tabindex="-9999">Monthly Payment</a>
                        </strong>
                        <input class="input_box_2 maskMoney monthly_payment" name="ApplicationLiability[0][monthly]" id="ApplicationLiability_0_monthly" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_monthly_em_" style="display: none"></span>
                    </div>
                    <div class="row_input_4">
                        <strong class="hint_holder">
                            <a href="#" tabindex="-9999">Limit</a>
                        </strong>
                        <input class="input_box_2 maskMoney limit" name="ApplicationLiability[0][limit]" id="ApplicationLiability_0_limit" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_limit_em_" style="display: none"></span>
                    </div>
                    <div class="row_input_4">
                        <strong class="hint_holder">
                            <a href="#" tabindex="-9999">Balance</a>
                        </strong>
                        <input class="input_box_2 maskMoney balance" name="ApplicationLiability[0][balance]" id="ApplicationLiability_0_balance" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_balance_em_" style="display: none"></span>
                    </div>
                </div>
            </div>
            <div class="large-3 columns indent_top">
                <strong class="btn_delete liability"><a href="#">Delete</a></strong>
                                    <strong class="btn_add_more liability"><a>Add More</a></strong>
                            </div>
        </div>
        <div class="row">
            <div class="large-3 columns">
                <div class="row_label_2">
                </div>
            </div>
            <div class="large-3 columns">
                <div class="row_input_2">
                    <div class="row_label">
                        <label class="line" for="ApplicationLiability_bsb">BSB</label>                    </div>
                    <div class="row_input">
                        <input class="input_box_2" name="ApplicationLiability[0][bsb]" id="ApplicationLiability_0_bsb" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_bsb_em_" style="display: none"></span>
                    </div>
                </div>
                <div class="row_input_2">
                    <div class="row_label double_width iner">
                        <label for="ApplicationLiability_account_number">Account Number</label>                    </div>
                    <div class="row_input">
                        <input class="input_box_2" name="ApplicationLiability[0][account_number]" id="ApplicationLiability_0_account_number" type="text" maxlength="255"><span class="required_field_text" id="ApplicationLiability_account_number_em_" style="display: none"></span>
                    </div>
                </div>
            </div>
            <div class="large-3 columns">
            </div>
        </div>
        <div class="ownership_block" style="display: none;">
                            <div class="row indent_5">
                    <div class="row_label">
                        Tom Tomas                    </div>
                    <div class="row_input">
                        <input type="text" value="50" name="Ownership[0][118][percent]" id="Ownership_0_118_percent"><span>%</span>
                        <input type="hidden" value="118" name="Ownership[0][118][applicant_id]" id="Ownership_0_118_applicant_id">                    </div>
                </div>
                            <div class="row indent_5">
                    <div class="row_label">
                        Tom Tomas                    </div>
                    <div class="row_input">
                        <input type="text" value="50" name="Ownership[0][125][percent]" id="Ownership_0_125_percent"><span>%</span>
                        <input type="hidden" value="125" name="Ownership[0][125][applicant_id]" id="Ownership_0_125_applicant_id">                    </div>
                </div>
                            <div class="row indent_5">
                    <div class="row_label">
                                             </div>
                    <div class="row_input">
                        <input type="text" value="0" name="Ownership[0][126][percent]" id="Ownership_0_126_percent"><span>%</span>
                        <input type="hidden" value="126" name="Ownership[0][126][applicant_id]" id="Ownership_0_126_applicant_id">                    </div>
                </div>
                        <input type="submit" value="Save" class="btn_save">
        </div>
    </div>
</div>            </div>
            <div class="large-15 columns box_bg_holder">
                <div class="indent_holder iner">
                    <div class="row">
                        <div class="large-6 columns">
                            <div class="row_label_2">
                                <label for="ApplicationLiability_monthly_exp">What are your current Monthly expenses?</label>                            </div>
                        </div>
                        <div class="large-6 columns">
                            <div class="row_input">
                                <div class="row_input_4 none">
                                    <strong class="total_price"></strong>
                                </div>
                                <div class="row_input_4">
                                    <input class="input_box_2 maskMoney monthly_payment" name="ApplicationLiability[0][monthly_exp]" id="ApplicationLiability_0_monthly_exp" type="text" value="$ 0"><span class="required_field_text" id="ApplicationLiability_monthly_exp_em_" style="display: none"></span>
                                </div>
                                <div class="row_input_4 none">
                                    <strong class="btn_help_box">
                                        <a href="#">help</a>
                                        <span class="help_box">There Will Be any written comment</span>
                                    </strong>
                                </div>
                            </div>
                        </div>
                        <div class="large-1 columns">
                        </div>
                    </div>
                </div>
            </div>
            <div class="large-15 columns box_bg_holder_2 iner_4">
                <div class="indent_holder">
                    <div class="row">
                        <div class="large-6 columns">
                            <div class="row_label_2">
                                <label></label>
                            </div>
                        </div>
                        <div class="large-6 columns">
                            <div class="row_label_2">
                                <label></label>
                            </div>
                            <div class="row_input">
                                <div class="row_input_4">
                                    <strong class="total_price">Total:</strong>
                                </div>
                                <div class="row_input_4">
                                    <strong class="hint_holder iner">
                                        <a href="#" tabindex="-9999">Monthly Payment</a>
                                    </strong>
                                    <strong class="total_price" id="monthly_payment_result">
                                        $ 0                                    </strong>
                                </div>
                                <div class="row_input_4">
                                    <strong class="hint_holder">
                                        <a href="#" tabindex="-9999">Limit</a>
                                    </strong>
                                    <strong class="total_price" id="limit_result">
                                        $ 0                                    </strong>
                                </div>
                                <div class="row_input_4">
                                    <strong class="hint_holder">
                                        <a href="#" tabindex="-9999">Balance</a>
                                    </strong>
                                    <strong class="total_price" id="balance_result">
                                        $ 0                                    </strong>
                                </div>
                            </div>
                        </div>
                        <div class="large-3 columns indent_top">

                        </div>
                    </div>
                </div>
            </div>
            <div class="large-15 columns box_bg_holder">
                <div class="indent_holder iner" style="padding-left: 0;">
                    <div class="large-9 columns">
                        <div class="row_label">
                            <label for="ApplicationLiability_comment">Income details (if any):</label>                        </div>
                        <div class="row_input">
                            <textarea class="textarea_box_2" name="ApplicationLiability[0][comment]" id="ApplicationLiability_0_comment"></textarea><span class="required_field_text" id="ApplicationLiability_comment_em_" style="display: none"></span>
                        </div>
                    </div>
                    <div class="large-3 columns"></div>
                </div>
            </div>
            <div class="large-15 columns button_holder">
                <div class="indent_holder_2">
                    <strong class="btn_previous movePrev"><a href="#">Previous</a></strong>
                    <strong class="btn_save moveSave"><a href="#">Save</a></strong>
                    <strong class="btn_next moveNext"><a href="#">Next</a></strong>
                </div>
            </div>
        </fieldset>
    <input id="moveType" type="hidden" value="save" name="moveType">    </form>

点击后event.preventDefault();链接不起作用，没有event.preventDefault();我在验证后无法看到错误消息并提交表单但是我无法看到错误消息并且在没有通知用户的情况下重新加载页面错误。

如果我使用此代码检测错误，表单不会提交，也不起作用。

$( "#"+where_it ).submit(function( event ) {
    alert( "Handler for .submit() called." );
}); 

where_it 这是形式的ID - 工作正常。

更新：如果用户通知错误，我想要提交哪种表单，如果不是我要去链接的错误。

UPDATE1 当我使用此代码时

$( "#"+where_it ).submit(function(event)
        {
            event.preventDefault();
            if( /* no error */)
            {
               $( "#"+where_it ).submit(); 
            }else{
               alert( "error." );
            }
        });

我将重定向。不提交表格而不是任何错误。 .submit（）的处理程序不起作用。这很奇怪。

UPDATE2

$(document).ready(function(){
    $('.nav_step ul li').on('click', function(event){
        $( "#"+where_it ).submit(function( event ) {
            alert( "Handler for .submit() called." );   
        });
        $( "#"+where_it ).submit();
        event.preventDefault();
    });
});

在此代码中可以正常运行。但是，如果点击事件后我无法重定向，则event.preventDefault();不允许它。如果这是删除我验证后无法看到错误消息。我认为如果成功重定向（url：this .nav_step ul li a），可能的解决方案是做这件事。但我不知道怎么做。

Answer 1

您需要使用event.preventDefault()但是您应该在一切正常后手动提交表单。 $( "#"+where_it ).submit();。 像这样的东西：

$('form').submit(function(event)
{
    event.preventDefault();
    if( /* no error */)
    {
       $('form').submit(); 
    }
});

This is a simple demo you can check it out and change your code.

的 HTML ：

<form>
    <input type='text' id='name' name='name'>
    <input type='text' id='last_name' name='name'>
    <input type='submit' id='send' value='SEND'>    
</form>
<span></span>

<强> JS ：

$('form').on('submit', function(event)
{
     event.preventDefault();
     if($('#name').val() != '' && $('#last_name').val() != '')
     {
         // here you can submit the form
         alert('submitted');
         //$('form').submit();
     }
     else
     {
         $('span').text('fill the textboxes.'); 
     }
});