[英]Javascript form submission validation is not working
I am unsure why my javascript form submission validation is not working – any help would be much appreciated. 我不确定为什么我的javascript表单提交验证无法正常工作-任何帮助将不胜感激。
table-first
& table second
table-first
和table second
table-first
is hidden and table-second
is displayed table-first
被隐藏, table-second
被显示 table-first
has a class “voucher_input”
on the input field for a voucher & table-first
在凭证的输入字段上具有“voucher_input”
类, table-second
has a class called “voucher-input2”
on the voucher input field table-second
在凭证输入字段上有一个名为“voucher-input2”
的类 I have written a javascript to prevent submission of the form if the voucher input field is empty And if empty it should prompt up an error message 我已经编写了一个JavaScript来防止如果凭证输入字段为空,则无法提交表单;如果为空,则应提示错误消息
The code works well for “table-first”
with the class “voucher-input”
– a form is not submitted when the voucher input field is empty 该代码适用于
“table-first”
“voucher-input”
类的“table-first”
–当voucher输入字段为空时,不提交表单
But the code does not work well with “table-second”
with the class “voucher-input2”
– the form submits with an empty voucher input field. 但是该代码不能与
“table-second”
“voucher-input2”
类的“table-second”
一起使用-表单提交时带有空的voucher输入字段。
Can one please advise me on what is wrong with my code as I want the input fields with the “voucher-input” & “voucher-input2” to prompt up an error message when the field is empty 可以请我告诉我我的代码有什么问题吗,因为我希望带有“ voucher-input”和“ voucher-input2”的输入字段在字段为空时提示错误消息
My code are as below. 我的代码如下。 Many thanks
非常感谢
my javascript code: is intended to prompt up an error message if the voucher fields with the class voucher_input
& voucher_input2
are empty - it currently only prompts up an error message for voucher_input
and not voucher_input2
我的JavaScript代码:如果类
voucher_input
和voucher_input2
为空,则提示错误消息-当前仅提示voucher_input
而不是voucher_input2
的错误消息
$(document).ready(function () {
var form = $("#vouchers_form");
$("#vouchers_form").on("submit", function(e){
// e.preventDefault();
var voucher_input = $('.voucher_input').val();
var voucher_input2 = $('.voucher_input2').val();
if (voucher_input.length < 1) {
$("#popupErrorConfirmVoucherEmpty").popup("open", { transition: "fade", history: false });
return false;
}
else if (voucher_input2.length < 1) {
$("#popupErrorConfirmVoucherEmpty").popup("open", { transition: "fade", history: false });
return false;
}
else {
form.submit();
}
});
});
html code: table-first
with the input field <input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />
html代码:
table-first
输入字段为<input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />
<div class="main-table table-first">
<div class="table-header">select a payment option</div>
<div class="table-content-container">
<div class="table-content">
<div class="table-container">
<table>
<tbody>
<tr>
<td class="left-content">
<div>
<div class="hidden" id="paypal_express_checkout"><input type="checkbox" checked="checked" value="10147608"/></div>
<p>
<a href="#" id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit">
<img alt="" height="48" src="../../account/gallery/6759612/images/paypal-button.png" width="242" />
<!-- <input id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit" /></p> -->
</a>
</p>
</div>
</td>
</tr>
<tr>
<td class="left-content">
<div class="cards-visa-master">
<div class="inner-inner-container">
<img alt="" src="../../account/gallery/6759612/images/card-visa.png" />
<img alt="" src="../../account/gallery/6759612/images/card-master.png" />
</div>
</div>
</td>
<td>
<form action="//manager.odyssys.net/account//signin/voucher" data-ajax="false" id="vouchers_form" method="post">
<ul>
<li>
<div class="check-button" id="terms"><input class="hidden" id="accept_terms_vouchers_container" name="checkbox" onclick="termsChecked();" type="checkbox" /> </div>
<div class="check-button" id="promotions"><input class="hidden" id="accept_promotions_vouchers_container" name="checkbox" onclick="promotionsChecked();" type="checkbox" /> </div>
<div><input id="voucher_login_btn" type="submit" value="apply" /></div>
</li>
<li>
<p class="voucher-header">Do you have a Promo code?</p>
<div><input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" /></div>
</li>
</ul>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- msg start -->
<div class="popup error" data-role="popup" id="popupErrorConfirmVoucherEmpty">
<a class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="a" href="#">Close</a>
<p style="padding: 10px; color: red">You must enter a voucher code</p>
</div>
<!-- msg start -->
</div>
html code: table-second
with the input field <input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />
html代码:
table-second
具有输入字段<input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />
<!-- reponsive design displayed when width screen is below 740px -->
<div class="main-table table-second">
<div class="table-header">select a payment option</div>
<div class="table-content-container">
<div class="table-content">
<div class="table-container">
<table>
<tbody>
<tr>
<td class="left-content paypal">
<div>
<div class="hidden" id="paypal_express_checkout"><input type="checkbox" checked="checked" value="10147608"/></div>
<p>
<a href="#" id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit">
<img alt="" height="48" src="../../account/gallery/6759612/images/paypal-button.png" width="242" />
<!-- <input id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit" /></p> -->
</a>
</p>
</div>
</td>
</tr>
<tr>
<td class="left-content card">
<div class="cards-visa-master">
<div class="cards-visa-master">
<div class="inner-inner-container">
<img alt="" src="../../account/gallery/6759612/images/card-visa.png" />
<img alt="" src="../../account/gallery/6759612/images/card-master.png" />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<form action="//manager.odyssys.net/account//signin/voucher" data-ajax="false" id="vouchers_form" method="post">
<p class="voucher-header ">Do you have a Promo code?</p>
<div><input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" /></div>
<div class="check-button" id="terms"><input class="hidden" id="accept_terms_vouchers_container" name="checkbox" onclick="termsChecked();" type="checkbox" /> </div>
<div class="check-button" id="promotions"><input class="hidden" id="accept_promotions_vouchers_container" name="checkbox" onclick="promotionsChecked();" type="checkbox" /> </div>
<div><input id="voucher_login_btn" type="submit" value="apply" /></div>
</form>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- msg start -->
<div class="popup error" data-role="popup" id="popupErrorConfirmVoucherEmpty">
<a class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="a" href="#">Close</a>
<p style="padding: 10px; color: red">You must enter a voucher code</p>
</div>
<!-- msg start -->
</div>
</div>
The error may be due to a duplicate ID on the page. 该错误可能是由于页面上的ID重复造成的。
If both of these tables are on the same page the error block shouldn't have the same ID (popupErrorConfirmVoucherEmpty) as there should only be one ID on the page. 如果这两个表都在同一页面上,则错误块不应具有相同的ID(popupErrorConfirmVoucherEmpty),因为该页面上应该只有一个ID。 Try changing the name of the second one to popupErrorConfirmVoucherEmpty2 and altering the JS accordingly
尝试将第二个名称更改为popupErrorConfirmVoucherEmpty2并相应地更改JS
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.