我不确定为什么我的 javascript 表单提交验证不起作用 - 任何帮助将不胜感激。
- 我有 2 个表，其中包含一个类:
table-first&table second - 当屏幕小于 740 像素时使用媒体查询
table-first被隐藏并且table-second显示 -
table-first有课“voucher_input”在优惠券的输入字段上& -
table-second有一个名为“voucher-input2”的类在凭证输入字段 我编写了一个 JavaScript，以防止在凭证输入字段为空时提交表单 如果为空，则应提示错误消息
该代码适用于
“table-first”与类(class)“voucher-input”– 当凭证输入字段为空时，不会提交表单但是该代码不能很好地与
“table-second”配合使用与类(class)“voucher-input2”– 表单提交时带有空凭证输入字段。
请告诉我我的代码有什么问题，因为我希望带有“voucher-input”和“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代码: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代码: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>
最佳答案
该错误可能是由于页面上的 ID 重复造成的。
如果这两个表位于同一页面上，则错误 block 不应具有相同的 ID (popupErrorConfirmVoucherEmpty)，因为页面上应该只有一个 ID。尝试将第二个的名称更改为 popupErrorConfirmVoucherEmpty2 并相应地更改 JS
关于Javascript 表单提交验证不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31453553/