jquery - 检查空输入字段的代码问题

Question

我发现本教程创建了一个电子邮件表单来发送电子邮件，但是 java 脚本代码中似乎有一个错误，可以在下面找到：

$('#sendfeedback').on("click", function() {
var url = 'api/send.php';
var error = 0;
var $contactpage = $(this).closest('.ui-page');
var $contactform = $(this).closest('.contact-form');
$('.required', $contactform).each(function (i) {
    if ($(this).val() === '') {
        error++;
    } 
}); // each
if (error > 0) {
        alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.'); } 
else {//some code}

单击可以正常工作，但是即使填充了字段，也会显示错误，我该如何阻止这种情况发生？请注意，当我删除这部分代码时，它会起作用。下面是 HTML 代码：

<div class="contact-thankyou" style="display: none;">
                Thank you.  Your message has been sent.  We will get back to you as soon as we can.
            </div>
            <div class="contact-form">
                <p class="mandatory">All fields are Manadatory</p>
                <div data-role="fieldcontain">
                    <label for="senderName">Your Name:</label>
                    <input type="text" name="senderName" id="senderName" class="required">
                </div>
                <div data-role="fieldcontain">
                    <label for="senderEmail">Your Email Address:</label>
                    <input type="email" name="senderEmail" id="senderEmail" class="required">
                </div>
                <div data-role="fieldcontain">
                    <label for="subjectCategories">Subject</label>
                        <select name="subjectCategories" id="subjectCategories" data-native-menu="false" class="required">
                            <option value="" data-placeholder="true">Select...</option>
                            <option value="Registration">Register as an Artist</option>
                            <option value="Feature">Want your music featured?</option>
                            <option value="Advertising">Advertise your company</option>
                            <option value="App Issues">App Issues</option>
                            <option value="General Feedback">General Feedback</option>
                        </select>
                </div>
                <div data-role="fieldcontain">
                    <label for="message">Your Message:</label>
                    <textarea name="message" id="message" placeholder="Please type your message" class="required" cols="80" rows="10" maxlength="10000"></textarea>
                    </div>
                <div class="send"><a href="javascript:;" data-role="button" data-iconpos="right" id="sendfeedback">Send Feedback</a></div>
            </div>

Answer 1

在您的代码中，您希望使用 class 验证四个字段required。在#subjectCategories选择菜单上，该类required被添加了两次，一个用于<select>弹出菜单，另一个添加到调用 select menu的<span>下方。没有价值，它导致了错误。<a>#subjectCategoriesspan

我通过在触发验证后添加以下代码进行了简单的修复，以required从span.

$('#sendfeedback').on("click", function () {
 $($.mobile.activePage).find('span').removeClass('required');
 //....
 //the rest of your code
 //...
});