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

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

我通过在触发验证后立即添加以下代码，从required删除了额外的span类，从而轻松解决了问题。

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

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

1 个答案: