it-roy-ru.com

Материализовать сообщение об ошибке проверки пользовательской формы CSS

каждый! Я пытаюсь создать свою регистрационную форму, используя Materialise CSS и плагин проверки jQuery ( https://jqueryvalidation.org/ ).

Просто хотел узнать, как поместить пользовательские сообщения об ошибках, которые я установил для каждого правила проверки в плагине, в атрибут data-error элемента input?

Согласно документации Materialise CSS ( http://materializecss.com/forms.html ), мы можем добавить пользовательские сообщения об ошибках валидации, добавив атрибут data-error к меткам поля ввода. Но это показывает только одно сообщение для любых правил проверки, которые нарушены.

Я хочу отобразить соответствующее сообщение об ошибке для конкретного правила проверки, которое нарушает пользователь.

Вот моя форма:

<form id="reg-form">
<div class="row">
    <div class="input-field col s6">
        <input id="firstname" name="fname" type="text"/>
        <label for="firstname">First Name</label>
    </div>
    <div class="input-field col s6">
        <input id="lastname" name="lname" type="text">
        <label for="lastname">Last Name</label>
    </div>
</div>
<div class="row">
    <div class="input-field col s12">
        <input id="email" name="email" type="email" required/>
        <label for="email">Email</label>
    </div>
</div>
<div class="row">
    <div class="input-field col s12">
        <input id="password" name="pass" type="password" required/>
        <label for="password">Password</label>
    </div>
</div>
<div class="row">
    <div class="input-field col s12">
        <input id="confirm-password" name="confirm_pass" type="password" required/>
        <label for="confirm-password">Confirm Password</label>
    </div>
</div>
<div class="row">
    <div class="col s12 right-align">
        <button class="btn btn-large" type="submit" name="action">
            Submit
        </button>
    </div>
</div>

И вот мой метод проверки:

$("#reg-form").validate({
rules: {
    fname: {
        required: true,
        minlength: 2
    },
    lname: {
        required: true,
        minlength: 2
    },
    mobile_num: {
        required: true,
        minlength: 10,
        maxlength: 10
    },
    email: {
        required: true,
        email:true
    },
    pass: {
        required: true,
        minlength: 5
    },
    confirm_pass: {
        required: true,
        minlength: 5,
        equalTo: "#pass"
    }
},
//For custom messages
messages: {
    fname: {
        required: "Please enter your first name.",
        minlength: "You sure you're named with one letter?"
    },
    lname: {
        required: "Please enter your last name.",
        minlength: "You sure you're named with one letter?"
    },
    email: {
        required: "Please enter your email address.",
        email: "Please enter a valid email address."
    },
    pass: {
        required: "Please enter a password.",
        minlength: "Password must be atleast 5 characters."
    },
    confirm_pass: {
        required: "Please confirm your password.",
        minlength: "Password must be atleast 5 characters.",
        equalTo: "Password does not match."
    }
}
});

Или есть другой способ отображения пользовательских сообщений об ошибках в метке сообщения проверки элемента ввода в Materialize?

4
Ronneil Petterson

Здесь есть раздел «Пользовательские сообщения об ошибках и успехах» - http://materializecss.com/forms.html

Вам следует использовать атрибут data-error, размещенный на метке.

<label for="firstname" data-error="Please enter your first name.">First Name</label>

Конечно, если вы хотите сделать сообщение динамическим, вам нужно использовать больше логики, но сообщение должно идти в атрибуте data-error.

Надеюсь это поможет.

2
Marko Francekovic

просто добавьте обязательный = "" или обязательный для ввода, и он должен работать просто отлично

1
Tyus Durant

Попробуйте добавить к этому свой метод:

    errorElement: 'div',
errorPlacement: function (error, element) {
    var placement = $(element).data('error');
    if (placement) {
        $(placement).append(error)
    } else {
        error.insertAfter(element);
    }
}
0
Louis Philippe