0

このチュートリアルでは、メールを送信するためのメールフォームを作成しましたが、以下にある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>
4

1 に答える 1

0

コードでは、クラスを使用して4つのフィールドを検証する必要がありますrequired。#subjectCategories選択メニューでは、クラスが2required回追加されます。1つは<select>ポップアップメニュー用で、もう1つは選択メニューを呼び出す<span>下に追加されます。には値がなく、エラーが発生しました。<a>#subjectCategoriesspan

検証をトリガーした直後に以下のコードを追加して、requiredから余分なクラスを削除することで、簡単な修正を行いましたspan。

$('#sendfeedback').on("click", function () {
 $($.mobile.activePage).find('span').removeClass('required');
 //....
 //the rest of your code
 //...
});
于 2013-03-24T22:11:38.290 に答える