1

私は単純なフォーム検証スクリプトに取り組んでいます。これは、フィールドが最初から空でないことを確認するだけです (さらに高度な検証は後で追加されます)。

ただし、送信時に、使用しているにもかかわらず、フォームは引き続き送信されているようですpreventDefault()。誰かが私の構文と私のロジックをチェックしてくれませんか? フォームが通常どおり送信される前に、検証のフラッシュが表示されます。

フィドル: http://jsfiddle.net/qb9KS/1/

HTML

<form id="userForm" method="POST" action="form-process.php">
    <div>
        <fieldset>
            <legend>User Information</legend>

            <div id="errorDiv"></div>

            <label for="name">Name:*</label>
            <input type="text" id="name" name="name" />
            <span class="errorFeedback errorSpan" id="nameError">Name is required</span>

            <br />

            <label for="city">City:</label>
            <input type="text" id="city" name="city" />

            <br />

            <label for="state">State:</label>
            <select id="state" name="state">
                <option></option>
                <option>Alabama</option>
                <option>California</option>
                <option>Colorado</option>
                <option>Florida</option>
                <option>Illinois</option>
                <option>New Jersey</option>
                <option>New York</option>
                <option>Wisconsin</option>
            </select>

            <br />

            <label for="zip">ZIP:</label>
            <input type="text" id="zip" name="zip" />

            <br />

            <label foe="email">Email Address:*</label>
            <input type="text" id="email" name="email" />
            <span class="errorFeedback errorSpan" id="emailError">Email is required</span>

            <br />

            <label for="phone">Telephone Number:</label>
            <input type="text" id="phone" name="phone" />
            <span class="errorFeedback errorSpan" id="phoneError">Format: xxx-xxx-xxxx</span>

            <br />

            <label for="work">Number Type:</label>
            <input class="radioButton" type="radio" name="phoneType" id="work" value="work" />
            <label class="radioButton" for="work">Work</label>
            <input class="radioButton" type="radio" name="phoneType" id="home" value="home" />
            <label class="radioButton" for="home">Home</label>
            <span class="errorFeedback errorSpan" id="phonetypeError">Please choose an option</span>

            <br />

            <label for="password1">Password:*</label>
            <input type="password" id="password1" name="password1" />
            <span class="errorFeedback errorSpan" id="password1Error">Password required</span>

            <br />

            <label for="password2">Verify Password:*</label>
            <input type="password" id="password2" name="password2" />
            <span class="errorFeedback errorSpan" id="password2Error">Passwords don't match</span>

            <br />

            <input type="submit" id="submit" name="submit">
        </fieldset>
    </div>
</form>

Javascript

$(document).ready(function() {
$("#userForm").submit(function(e) {
    removeFeedback();
    var errors = validateForm();
    if (errors == "") {
        return true;
    }
    else {
        provideFeedback(errors);
        e.preventDefault();
        return false;
    }
});

function validateForm() {
    var errorFields = new Array();
    if ($('#name').val() == "") {
        errorFields.push('name');
    }
    if ($('#email').val() == "") {
        errorFields.push('email');
    }
    if ($('#password1').val() == "") {
        errorFields.push('password1');
    }
    return errorFields;
}

function provideFeedback(incomingErrors) {
    for (var i = 0; i < incomingErrors.length; i++) {
        $("#" + incomingErrors[i]).addClass("errorClass");
        $("#" + incomingErrors[i] + "Error").removeclass("errorFeedback");
    }
    $("#errorDiv").html("Errors encountered");
}

function removeFeedback() {
    $("#errorDiv").html("");
    $('input').each(function() {
        $(this).removeClass("errorClass");
    });
    $('.errorSpan').each(function() {
        $(this).addClass("errorFeedback");
    });
}
});
4

2 に答える 2

4

そのはず...

$("#" + incomingErrors[i] + "Error").removeClass("errorFeedback");

... 代わりは。jQuery オブジェクトにはメソッドがないためremoveclass(JS では大文字と小文字が区別されます)、この関数はエラーで失敗し、行も呼び出されませe.preventDefault()ん。return false

結論: 常に JS コンソールでエラーをチェックしてください。これにより、多くの時間と神経を節約できます。)

于 2013-10-29T16:27:22.210 に答える
0

array.length代わりにチェックしてみてください=

$(document).ready(function() {

    $("#userForm").submit(function(e) {

      if (errors.length >0) {
            return true;
       }
    }

}

あなたもタイプミスremoveClass

$("#" + incomingErrors[i] + "Error").removeClass("errorFeedback");
于 2013-10-29T16:17:50.173 に答える