Question

我有以下一组代码，我试图让它以这样的方式工作，默认情况下它没有弹出通知而没有X符号。如果输入无效，则表明输入（红色框）和Red-X的格式。其余的很好，一旦有人做了一些输入，它会给出一个绿色标记符号，但在这种情况下我根本不需要弹出通知。

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;
    }

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

The Required Format

Answer 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();

    },
});

}

使用有效和无效的通知和符号进行表单验证

1 个答案: