Question

我编写了这个简单的脚本来验证非空的输入字段。

例如，当发送表单并且id为'name'的输入为空时，该元素旁边将显示一条短消息。问题是，如果表单再次发送，输入不再为空，这样做 $(element).nextAll().remove()会导致ID为'phone'的元素消失。

我只需要删除邮件错误而不是所有其他元素。

请提出一个解决该问题的简便方法。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#formu").submit(function(){
                     validateInputText($("#name"),"Enter you name");
                     validateInputText($("#phone"),"Enter your phone number");    
                     return false;                
                });
                function validateInputText(inputText, errorMessage){
                    if($(inputText).val()==''){
                        setFieldAsNotValid(inputText, errorMessage)
                    }else{
                        removeErrorMessage(inputText)
                    }
                }

                function setFieldAsNotValid(element, errorMessage){
                    $(element).nextAll().remove();
                    $(element).after('<b>'+errorMessage+'</b>')
                    $(element).addClass('selected');
                }

                function removeErrorMessage(element){
                    $(element).nextAll().remove();
                    $(element).removeClass('selected');
                }       
            });



        </script>
    </head> 
    <body>
       <form id="formu">
           name: <input type="text" id="name" />
           phone: <input type="text" id="phone" />
           <input type="hidden">
           <input type="submit">
        </form>
    </body>

</html>

Answer 1

为什么不直接给出错误消息？例如：

<b class="error">Message here</b>
<p class="error">Message here</p>

然后删除您调用的任何错误消息

$('.error').remove();

Answer 2

我为你创建了一些代码。这不是你问题的直接答案，但我认为这是做你想做的更好的方式。

HTML：

<form id="myForm">
    Name: <input id="name" type="text" allowblank="false" max="10"/><span for="name" class="errorMessage"></span>
    <br/>
    Age: <input id="age" type="text" allowblank="false"/><span for="age" class="errorMessage"></span>
    <br/>
    <input type="submit" value="Save"/>
</form>

CSS：

.error {
    border-color: #ff0000;
}

.errorMessage {
    color: #ff0000;
}

JavaScript的：

$( "#myForm" ).submit(function(){
    return validate( $(this) );
});

function validate( $form ) {

    var isValid = true;

    $textInputs = $form.find( "input[type=text]" );
    $textInputs.each(function( index, item ){

        var isThisValid = true;
        var $item = $(item);
        var $errorSpan = $( "span[for=" + $item.attr("id") + "]" );

        var max = parseInt( $item.attr( "max" ) );

        if ( $item.attr( "allowblank" ) == "false" ) {
            if ( $item.val().trim() == "" ) {
                $item.addClass( "error" );
                $errorSpan.html( "this field cannot be empty" );
                isThisValid = false;
            }
        }

        if ( max && isThisValid ) {
            if ( $item.val().trim().length > max ) {
                $item.addClass( "error" );
                $errorSpan.html( "the maximum length of this field is " + max );
                isThisValid = false;
            }
        }

        if ( isThisValid ) {
            $item.removeClass( "error" );
            $errorSpan.html( "" );
        }

        if ( isValid && !isThisValid ) {
            isValid = false;
        }

    });

    return isValid;

}

使用此代码，您可以改进验证，创建新规则。有一些jQuery插件可以完成这项工作，但由于jQuery的插件站点正在维护，我认为你可以使用这种方法。请注意，我使用了一些自定义属性来设置验证类型，但您可以使用另一种方法，因为创建包含验证约束的对象。我使用“max”而不是maxlength，因为后者是一个有效的输入标签属性。无论如何，jsFiddle在这里：http://jsfiddle.net/davidbuzatto/2N4yY/

Answer 3

也许不是最好的解决方案，但它现在正在运作...... 因为我在错误消息的input元素旁边添加了一个div元素，我问下一个元素是否是删除它的div ...

function setFieldAsNotValid(element, errorMessage){
    if ($(element).next('div').length){
        $(element).next().remove();
    }
    $(element).after('<div style="margin-left:0px;"><b>'+errorMessage+'</b></div>')
    $(element).addClass('selected');
}

function removeErrorMessage(element){
    $(element).next().remove();
    $(element).removeClass('selected');
}

jQuery - 如何替换此特定情况的$（element）.nextAll（）。remove（）

3 个答案: