0

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

例如，当表单被发送并且带有 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>
4

3 回答 3

2

你为什么不给你的错误信息一个类？例如：

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

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

$('.error').remove();
于 2012-08-04T02:26:32.130 回答
1

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

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/

于 2012-08-04T03:55:22.113 回答
0

也许不是最好的解决方案，但它现在正在工作......因为我在错误消息的输入元素旁边添加了一个 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');
}
于 2012-08-04T03:19:14.383 回答