具有有效和无效通知和符号的表单验证答案

【问题标题】：form validation with valid and invalid notification and symbol具有有效和无效通知和符号的表单验证
【发布时间】：2014-01-20 15:15:45
【问题描述】：

我有以下一组代码，我试图让它以这样一种方式工作，默认情况下它不会有弹出通知，也没有 X 符号。如果输入无效，应显示输入格式（红色框）和 Red-X。其余的很好，只要有人输入，它就会给出一个绿色的勾号，但在这种情况下，我根本不想要弹出通知。

Fiddle Demo

HTML：

<form action="#" method="GET" id="subscribe" name="subscribe">
    <div class="NameForm">                        
        <input class="inputName" type="text" placeholder="Your Name" name="query" aria-describedby="name-format" required >
            <span id="name-format" class="helpName">Format: firstname lastname</span>
        </input>
    </div>
</form>

CSS：

.inputName {
    border: 2px solid #306b88;
    color: #383838;
    font: 14px/14px 'focobold';
    height: 40px;
    margin: 2px 0;
    padding: 0 16px;
    text-transform: uppercase;
    width:248px;
    }

.helpName {
    display:none;
    font-size:90%;
    }

input:focus + .helpName {
    display:inline-block;
    background-color:#26ae56;
    height:38px;
    width:240px;
    position:absolute;
    color:#fff;
    left:30px;
    top:70px;
    text-align:center;
    line-height:40px;
    }

input:required:invalid, input:focus:invalid {
    background-image: url(http://s27.postimg.org/ttonbaj5b/invalid.png);
    background-position: 260px center;
    background-repeat: no-repeat;
    }

input:required:valid {
    background-image: url(http://s14.postimg.org/gaechg2e5/valid.png);
    background-position: 254px center;
    background-repeat: no-repeat;
    }

或多或少，这是必需的格式：

【问题讨论】：

标签： html css

【解决方案1】：

我很高兴我能够解决这个任务......

这里是Fiddle，如果您想了解有关解决方案的更多信息。

需要

function validate_all_forms(){

jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});



jQuery.validator.addMethod("notEqual", function(value, element, param) {
  return this.optional(element) || value != param;
}, "Please specify a different (non-default) value");



$( "#registration-form" ).validate({
    rules: {
        myname: {
            required: true,
            minlength: 3
        },
        email: {
            required: true,
            minlength: 6,
            email: true
        }, 
    },
    focusInvalid: false,
    onkeyup: false, 
    submitHandler: function(form) {
        $(form).ajaxSubmit({
            target: '.optional'
        }); 
    },
    messages: {
        myname: {
            required: "Enter Your name",
            minlength: jQuery.format("atleast 2 char"),
            notEqual: "except the default value please!"
        },
        email:{
            required: "Enter Your E-MAIL",
            minlength: jQuery.format("atleast 6 char"),
            email: "incorrect e-mail id" 
        }
    }   
});

$( "#contact-form" ).validate({
    rules: {
        your_name: {
        required: true,
        minlength: 2

        },

    },
    onkeyup: false, 
    focusInvalid: false,
    submitHandler: function(form) {
        $(form).ajaxSubmit();

    },
});

}

【讨论】：