使用 jquery 验证插件显示预定义的 HTML 元素

Question

我想用 jquery 验证插件显示符号。如果我没有正确输入我的值 jquery 验证应该给出错误（没关系）并显示我的自定义符号 (.validation-incorrect)。验证通过后，我想显示 .validation-correct 符号。怎么做？这是我的代码

<div class="col-xs-4">
   <input type="text" class="form-control" name="roleName" placeholder="Role name" />                       
</div>
<b class="fa fa-check control-label validation-correct roleName-validation" 
                data-toggle="tooltip" title="You have entered it correctly">
</b>
<b class="fa fa-remove control-label validation-incorrect roleName-validation" 
     data-toggle="tooltip" title="You should be entered " id="roleName-validation">
</b>

Answer 1

我假设您想为无效条目显示一个图标，然后在条目有效时更改。您可能希望首先向要验证的项目添加 onchange 事件。使用像

这样的东西

    <input type="text" onchange="validateEntry(this);"/>

触发"validateEntry"javascript函数（使用[=13=传入控制对象）。例如下面的validateEntry函数验证输入文本是否大于3

    function validateEntry(inputToValidate) {
        if (inputToValidate.value.length < 3) {
            document.getElementById('inputThing').style.backgroundColor = '#F6CECE';
            hide(document.getElementById('validSymbolsId'));
            show(document.getElementById('invalidSymbolsId'));
        } else { 
            document.getElementById('inputThing').style.backgroundColor = '#FFFFFF';
            hide(document.getElementById('invalidSymbolsId'));
            show(document.getElementById('validSymbolsId'));
        }
    }

您可以使用 JQuery 来隐藏或显示元素，但如果没有，您可以使用类似下面的方法。

    function hide(element) {
        element.style.display = 'none';
    }

    function show(element) {
        element.style.display = '';
    }

使用 jquery 验证插件显示预定义的 HTML 元素

Display predifined HTML element with jquery validation plugin

javascript

jquery

jquery-validate