Question

我有一张基本上有效的表格。请参阅小提琴here。

表单验证输入，但在警报中显示消息。

    $('#submit-btn').click(function() {
    var valid = true,
        errorMessage = "",
        $email = $('#email');

    if ($('#date').val() == '') {
        errorMessage += "Please add date\n";
        valid = false;
    }
    if ($('#name').val() == '') {
        errorMessage += "please enter your name \n";
        valid = false;
    }

    if ($('#tel').val() == '') {
        errorMessage += "Enter phone number\n";
        valid = false;
    }
    if ($('#tel').val() !== '') {
        if (!phone_pattern.test($('#tel').val())) {
            errorMessage += "Use correct format\n";
            valid = false;
        }
    }

    if ($email.val() == '') {
        errorMessage += "please enter your email\n";
        valid = false;
    }

    if ($email.val() !== "") {
        if (!email_pattern.test($email.val())) {
            errorMessage += "Please enter email in correct format\n";
            valid = false;
        }
    }

    if (!valid && errorMessage.length > 0) {
        alert(errorMessage);
    } else {

    }
});

如何在每个输入字段下创建这些错误消息？

提前多多感谢。

Answer 1

$('#submit-btn').click(function() {
var valid = true,
    errorMessage = "",
    $email = $('#email');

if ($('#date').val() == '') {
    $("#date_error").text("Please add date");
    valid = false;
}
if ($('#name').val() == '') {
    $("#name_error").text("please enter your name");
    valid = false;
}

if ($('#tel').val() == '') {
    $("#tel_error").text("Enter phone number");
    valid = false;
}
if ($('#tel').val() !== '') {
    if (!phone_pattern.test($('#tel').val())) {
        $("#tel_error").text("Use correct format");
        valid = false;
    }
}

if ($email.val() == '') {
    $("#email_error").text("please enter your email");
    valid = false;
}

if ($email.val() !== "") {
    if (!email_pattern.test($email.val())) {
        $("#email_error").text("Please enter email in correct format");
        valid = false;
    }
}

if (!valid) {
    e.preventDefault();
} else {
 // allow the form to be submitted.
}
 });

这是HTML部分

<div id="nemIdCallback">
        <label for="date">Date: <span>*</span></label>
        <input id="date" type="text" name="date" placeholder="Date" class="required" />
        <p id="date_error"></p>

        <label for="name">name: <span>*</span></label>
        <input id="name" type="text" name="name" placeholder="Name" class="required" />
        <p id="name_error"></p>

        <label for="tel">Phone number: <span>*</span></label>
        <input id="tel" type="tel" name="tel" placeholder="Phone number" class="required" />
        <p id="tel_error"></p>

        <label for="email">E-mail: <span>*</span></label>
        <input id="email" type="email" name="email" placeholder="E-mail address" class="required"/>
        <p id="email_error"></p>

Answer 2

您可以为每个元素执行此操作（示例中的电子邮件）：

$("<p class='error'>").text(errorMessage).insertAfter($email);

内联表单验证消息而不是警报

2 个答案: