在自定义区域中显示提醒消息 - HTML必需

时间:2018-02-02 05:58:44

标签: javascript html alert

默认情况下,单击提交按钮

时,文本框底部会显示html所需的警报消息

如何在文本框的左侧或任何其他方面显示所需的验证消息。

1 个答案:

答案 0 :(得分:0)

您可以使用jQuery进行验证或validate.js。请使用jQuery检查小提琴的自定义验证消息。

var createAllErrors = function() {
    var form = $( this ),
        errorList = $( "ul.errorMessages", form );

    var showAllErrorMessages = function() {
        errorList.empty();

        // Find all invalid fields within the form.
        var invalidFields = form.find( ":invalid" ).each( function( index, node ) {

            // Find the field's corresponding label
            var label = $( "label[for=" + node.id + "] "),
                // Opera incorrectly does not fill the validationMessage property.
                message = node.validationMessage || 'Invalid value.';

            errorList
                .show()
                .append( "<li><span>" + label.html() + "</span> " + message + "</li>" );
        });
    };

    // Support Safari
    form.on( "submit", function( event ) {
        if ( this.checkValidity && !this.checkValidity() ) {
            $( this ).find( ":invalid" ).first().focus();
            event.preventDefault();
        }
    });

    $( "input[type=submit], button:not([type=button])", form )
        .on( "click", showAllErrorMessages);

    $( "input", form ).on( "keypress", function( event ) {
        var type = $( this ).attr( "type" );
        if ( /date|email|month|number|search|tel|text|time|url|week/.test ( type )
          && event.keyCode == 13 ) {
            showAllErrorMessages();
        }
    });
};

$( "form" ).each( createAllErrors );

https://jsfiddle.net/subirbiswas500/br80v9hw/