Javascript 用户更正错误后未在Jquery中提交表单（返回false；）_Javascript_Jquery_Ajax

Javascript 用户更正错误后未在Jquery中提交表单（返回false；）

javascript jquery ajax

Javascript 用户更正错误后未在Jquery中提交表单（返回false；）,javascript,jquery,ajax,Javascript,Jquery,Ajax,我遇到了麻烦。我正在编写一个简单的抵押贷款计算器，它通过ajax将数据发送到calc.php 使用jquery，我检查以确保用户在请求的字段中输入适当的值；购买价格和首期付款都应为数字（工作），首期付款不能大于购买价格（工作），当选择期限时，利率自动填充（工作），如果期限或利率未填充（工作），则显示错误消息当用户提交表单且任何必填项丢失时，将显示错误消息，建议。。。但是，当用户更正错误时，表单不会提交通过查看我不太复杂的代码，您很快就会看到，我仍在学习Jquery，非常感谢您提供的任何输入

我遇到了麻烦。我正在编写一个简单的抵押贷款计算器，它通过ajax将数据发送到calc.php

使用jquery，我检查以确保用户在请求的字段中输入适当的值；购买价格和首期付款都应为数字（工作），首期付款不能大于购买价格（工作），当选择期限时，利率自动填充（工作），如果期限或利率未填充（工作），则显示错误消息

当用户提交表单且任何必填项丢失时，将显示错误消息，建议。。。但是，当用户更正错误时，表单不会提交

通过查看我不太复杂的代码，您很快就会看到，我仍在学习Jquery，非常感谢您提供的任何输入

提前谢谢你的帮助

HTML格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Calculator</title>
    <link rel="stylesheet" type="text/css" href="css/css.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">    </script>
    <script type="text/javascript" src="js/js.js" charset="utf-8"></script>
</head>

<body>
    <h1>Mortgage</h1>
    <form action="calc.php" method="post" id="mortgage-form">
        <p class="errorMessage" id="shouldBeNumber">*This value can only contain numbers</p>
        <p id="pPrice"><span class="errorMessage" id="PPmustBeNumber">*</span>Purchase Price: 
            <input type="text" name="purchase-price" id="purchase-price" value="0"/>
            <span class="errorMessage" id="purchasePriceError">Please enter a number value!</span>
        </p>
        <p id="dPayment"><span class="errorMessage" id="DPmustBeNumber">*</span>Down Payment: 
            <input type="text" name="down-payment" id="down-payment" value="0"/>
            <span class="errorMessage" id="downPaymentError">Down payment value must be less than Purchase Price!</span>
        </p>
        <p id="term">
            <select id="loan-term">
                <option value="noValueSelected">-- Select a Term -- </option>
                <option value="15yrs">15 Years</option>
                <option value="20yrs">20 Years</option>
                <option value="30yrs">30 Years</option>
            </select><span class="errorMessage" id="termRequired"> * Term is required.</span>
        </p>
        <div id="interest-rate"></div>
        <p><input type="submit" name="submit" id="submit" value="Calculate!" /></p>
    </form>

        <footer>
            <p>
                &copy; Copyright  by Ricardo
            </p>
        </footer>
</body>
</html>


计算器
抵押贷款
*此值只能包含数字
*购买价格：
请输入一个数值！

*首付款：
首付金额必须小于购买价格！


--选择一个术语--
15年
二十年
30年
*期限是必需的。



&抄袭；版权归里卡多所有

这是我的JQUERY

    $(function() {
//HIDE errors
$('.errorMessage').hide();

//Do something when loan-term changes
$('#loan-term').change(function(){
    var loanTerm = $(this).val();
    var interestOption = '';
    //alert(loanTerm);
    if (loanTerm == '15yrs') {
        interestOption += "<option value='15yrFixed'>15 Year Fixed: 2.88%    </option>";
    } else if (loanTerm == '20yrs') {
        interestOption += "<option value='20yrFixed'>20 Year Fixed: 3.52%</option>";
    } else if (loanTerm == '30yrs') {
        interestOption += "<option value='30yrFixed'>30 Year Fixed: 4.2%</option>";
    }

    if (loanTerm != "noValueSelected") {
        var interestRate = 
        "<select id='interest-rate'><option value='selectInterestRate'>-- Select an Interest Rate -- </option>" + interestOption + "</select><span class='errorMessage' id='interestRequired'> * This field is required.</span>";
        $('#interest-rate').html(interestRate).show();
    } else if (loanTerm == "noValueSelected") {
        $('#interest-rate').hide();
    }
});//END loan-term check

$('#mortgage-form').submit(function() {

    var purchasePrice = $('#purchase-price').val();
    var downPayment = $('#down-payment').val();
    var loanTerm = $('#loan-term').val();
    var interestRate = $('#interest-rate').val();

    function containsNumber(val) {
        return /^(\d|,)+$/.test(val)
    }

    if (containsNumber(purchasePrice) == true && containsNumber(downPayment) == true ) {
        $('#PPmustBeNumber').hide();
        $('#DPmustBeNumber').hide();
        $('#shouldBeNumber').hide();
        //alert(purchasePrice + downPayment);
        //CHECK IF DOWNPAYMENT IS LESS THAN PURCHASE PRICE. 
        if (downPayment <  purchasePrice) {
            $('#downPaymentError').hide();
        } else {
            $('#downPaymentError').show();
        }
    } else if (containsNumber(purchasePrice) == false){ 
        $('#PPmustBeNumber').show();
        $('#shouldBeNumber').show();
    } else if (containsNumber(downPayment) == false) {
        $('#DPmustBeNumber').show();
        $('#shouldBeNumber').show();
    }
    if (loanTerm != "noValueSelected") {
        $('#termRequired').hide();
            $("#interest-rate").change(function() {
                if (interestRate != "selectInterestRate"){
                    $('#interestRequired').hide();
                } else if (interestRate == "selectInterestRate"){
                    $('#interestRequired').show();
                }   
            })
    } else if (loanTerm == "noValueSelected"){
            $('#termRequired').show();
    } 


if ( purchasePrice && downPayment && loanTerm && interestRate) {
var data = new Object();
    data.purchasePrice = purchasePrice;
    data.downPayment = downPayment;
    data.loanTerm = loanTerm;
    data.interestRate = interestRate;
    data.interestOption = interestOption;

    //create an object of Ajax options:
    var options = new Object();

    //Establish each setting:

    options.data = data;
    options.dataType= 'text';
    options.type = 'get';
    options.url = 'calc.php';

    //perform the request:
    $.ajax(options);    
}

    return false;

}); //END SUBMIT FUNCTION
    });

$（函数（）{
//隐藏错误
$（'.errorMessage'）.hide（）；
//贷款期限改变时做些什么
$（“#贷款期限”）。更改（函数（）{
var loanTerm=$（this.val（）；
var利息率=“”；
//警报（loanTerm）；
如果（loanTerm==“15年”）{
利息率+=“15年固定利率：2.88%”；
}否则如果（loanTerm=='20yrs'）{
利息率+=“20年固定利率：3.52%”；
}否则，如果（loanTerm='30年'）{
利息率+=“30年固定利率：4.2%”；
}
如果（loanTerm！=“noValueSelected”）{
利率风险=
“--选择利率--”+利息选项+“*此字段为必填项。”；
$（'#interest-rate'）.html（interestRate.show（）；
}else if（loanTerm==“noValueSelected”）{
$（“#利率”）.hide（）；
}
})；//结束贷款期限检查
$（“#抵押贷款表”）。提交（函数（）{
var purchasePrice=$（“#购买价格”）.val（）；
var首付=$（“#首付”）.val（）；
var loanTerm=$（“#贷款期限”）.val（）；
var利率=$（“#利率”）.val（）；
函数containsNumber（val）{
返回/^（\d |，）+$/.test（val）
}
if（containsNumber（purchasePrice）==true&&containsNumber（首期付款）==true）{
$（'#PPmustBeNumber'）.hide（）；
$（'DPmustBeNumber'）.hide（）；
$（“#shouldBeNumber”）.hide（）；
//警报（购买价格+首付）；
//检查首期付款是否低于购买价格。
if（首付款<购买价格）{
$（“#downPaymentError”）.hide（）；
}否则{
$（“#downPaymentError”）.show（）；
}
}如果（containsNumber（purchasePrice）=false）{
$（'#PPmustBeNumber'）.show（）；
$（'shouldBeNumber'）.show（）；
}否则，如果（包含数字（首付款）=false）{
$（'DPmustBeNumber'）.show（）；
$（'shouldBeNumber'）.show（）；
}
如果（loanTerm！=“noValueSelected”）{
$（“#term required”）.hide（）；
$（“#利率”）。更改（函数（）{
如果（利率！=“选择利率”）{
$（“#需要兴趣”）.hide（）；
}else if（利率==“selectInterestRate”）{
$（“#需要利息”）.show（）；
}   
})
}else if（loanTerm==“noValueSelected”）{
$（“#term required”）.show（）；
} 
if（采购价格、首付款、贷款和利息）{
var data=新对象（）；
data.purchasePrice=采购价格；
data.downPayment=首付款；
data.loanTerm=loanTerm；
data.interestRate=利率；
data.interestOption=interestOption；
//创建Ajax选项的对象：
var options=新对象（）；
//建立每个设置：
options.data=数据；
options.dataType='text'；
options.type='get'；
options.url='calc.php'；
//执行请求：
$.ajax（选项）；
}
返回false；
})；//结束提交函数
});

如果使用jQuery的ajax函数，则无需提交表单。此外，如果希望表单提交，则需要输入if函数以返回true，否则表单将不会提交。不管发生什么，代码都会返回false。您需要将其设置为有条件的，因此，如果由于用户满足条件而没有显示错误，那么表单将返回true并发送，但是您不需要ajax，正如我所提到的

使用jQuery验证并正常提交表单的示例代码：为了使其正常工作，我将提交按钮从type=“submit”更改为type=“button”，这将阻止它自动提交

$('#submit').click(function(){
    // put all your code to check inputs for errors here.
    $('#mortgage-form').submit();
});

通过这种方式，您可以使用javascript进行验证，然后将表单发送到calc.php页面，使其符合您的需要。

我只希望表单按照正常方式提交，而不必执行ajax。我看到的主要问题是，您没有办法让表单

返回true允许表单实际提交。试着为下面的这篇文章使用subbing函数，这会让你大开眼界
$('#mortgage-form').submit(function () {

var purchasePrice = $('#purchase-price').val();
var downPayment = $('#down-payment').val();
var loanTerm = $('#loan-term').val();
var interestRate = $('#interest-rate').val();

function containsNumber(val) {
    return /^(\d|,)+$/.test(val)
}

if (containsNumber(purchasePrice) == true && containsNumber(downPayment) == true) {
    $('#PPmustBeNumber').hide();
    $('#DPmustBeNumber').hide();
    $('#shouldBeNumber').hide();
    //alert(purchasePrice + downPayment);
    //CHECK IF DOWNPAYMENT IS LESS THAN PURCHASE PRICE. 
    if (downPayment < purchasePrice) {
        $('#downPaymentError').hide();
    } else {
        $('#downPaymentError').show();
    }
} else if (containsNumber(purchasePrice) == false) {
    $('#PPmustBeNumber').show();
    $('#shouldBeNumber').show();
} else if (containsNumber(downPayment) == false) {
    $('#DPmustBeNumber').show();
    $('#shouldBeNumber').show();
}
if (loanTerm != "noValueSelected") {
    $('#termRequired').hide();
    $("#interest-rate").change(function () {
        if (interestRate != "selectInterestRate") {
            $('#interestRequired').hide();
        } else if (interestRate == "selectInterestRate") {
            $('#interestRequired').show();
        }
    })
} else if (loanTerm == "noValueSelected") {
    $('#termRequired').show();
}


if (purchasePrice && downPayment && loanTerm && interestRate) {
    var data = new Object();
    data.purchasePrice = purchasePrice;
    data.downPayment = downPayment;
    data.loanTerm = loanTerm;
    data.interestRate = interestRate;
    data.interestOption = interestOption;

    //create an object of Ajax options:
    var options = new Object();

    //Establish each setting:

    options.data = data;
    options.dataType = 'text';
    options.type = 'get';
    options.url = 'calc.php';

    return true;
}

return false;

}); //END SUBMIT FUNCTION

$（“#抵押贷款表”）。提交（函数（）{
var purchasePrice=$（“#购买价格”）.val（）；
var首付=$（“#首付”）.val（）；
var loanTerm=$（“#贷款期限”）.val（）；
var利率=$（“#利率”）.val（）；
functi