jquery: hide error message after validation

Question

I'm new with jquery. I want to display an error message when the entry is not a number. The problem here when the user deletes the inputs and correctly writes a number, the error message will still appears . How I can solve this problem ?

$("#SpecCode").mousedown( function() {
    specialismCode=$(this).val();
    if (!$.isNumeric(specialismCode) || specialismCode.length !=''){
        $("#SpecCode").parent().after('<span class="validation">Please enter correct input</span>');
        }

        });

if not, the error message will appears before the user touch the keyboard — Hamdy
– Hamdy, Commented Aug 24, 2017 at 18:21
.length returns a number. If there is no length, it returns 0 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — WillardSolutions
– WillardSolutions, Commented Aug 24, 2017 at 18:22

gaetanoM · Accepted Answer · 2017-08-24 18:31:46Z

1

ANSWER UPDATE

If you need to show/hide the validation message you can add it directly to the html fragment and use the .toggle(true/false).

$("#SpecCode").on('input',  function(e) {
    var specialismCode = $(this).val();
    var nextele = $(this).next('span');
    nextele.toggle(!$.isNumeric(specialismCode) || specialismCode.length == 0);
}).trigger('input');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form>
    <label for="SpecCode">Number:
        <input type="text" id="SpecCode"><span class="validation">Please enter correct input</span>
    </label>
</form>

You have some issues in your code.

Instead of:

specialismCode.length !=''

you can use:

specialismCode.length == 0

Instead of mousedown you can use input.

Finally, the error message comes after the input field. So, you can use:

$(this).next('span')

in order to select the error message.

The snippet:

$("#SpecCode").on('input',  function(e) {
    var specialismCode = $(this).val();
    var nextele = $(this).next('span');
    if (!$.isNumeric(specialismCode) || specialismCode.length == 0) {
        $(this).after(function(idx, txt) {
            return (nextele.length == 0) ? '<span class="validation">Please enter correct input</span>' : '';
        });
    } else {
        nextele.remove();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label for="SpecCode">Number:
        <input type="text" id="SpecCode">
    </label>
</form>

edited Aug 24, 2017 at 18:31

answered Aug 24, 2017 at 18:26

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hamdy Over a year ago

Thank you, it works. Obviously, I need to spend more time on jquery to learn it perfectly.

Collectives™ on Stack Overflow

jquery: hide error message after validation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related