Home/ Questions/Q 8376647
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T15:28:38+00:00

I wrote this simple script for validating non-empty input fields. When, for instance, the

  • 0

I wrote this simple script for validating non-empty input fields.

When, for instance, the form is sent and the input with the id ‘name’ is empty,
a short message will be displayed next to that element. The problem is that if
the form is sent one more time and that input is not empty anymore, doing this
$(element).nextAll().remove() will cause that the element with the id ‘phone’ disappears.

I just need to remove the message error and not all the other elements.

Please, suggest a short and easy way to solve that problem.

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I created some code for you. It is not a direct answer for your question, but I think It is a better way to do what you want.

    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;

}

    With this code, you can improve your validation, creating new rules. There are some jQuery plugins that do the job, but since the plugin site of jQuery is under maintenance, I think you can use this approach. Note that I used some custom attributes to set the validation type, but you can use another approach, as creating a object that contains the validation constraints. I used “max” instead of maxlength since the latter is a valid input tag attribute. Anyway, the jsFiddle is here: http://jsfiddle.net/davidbuzatto/2N4yY/

    • 0