in jquery validation the error message disappears quickly

Question

I have tried by using the below code but the error message disappears quickly

$(document).ready(function () {
    $('form').submit(function () {
        if ($("#first").val().match('^[a-zA-Z]{3,16}$')) {
            alert("valid");
        } else {
            $("#error_msg").after("invalid");
        }
    })
})

can anyone help me how to show the error message from disappearing quickly — tamil, Sep 06 '17 at 09:38
Possible duplicate of [jquery validation: prevent form submit](https://stackoverflow.com/questions/10305938/jquery-validation-prevent-form-submit) — Govind Samrow, Sep 06 '17 at 09:47
@tamil check my answer.You Can empty or remove the text and then append the text invalid.So it wont continuously print — XYZ, Sep 06 '17 at 10:26

score 1 · Answer 1 · answered Sep 06 '17 at 09:39

1

Use preventDefault() method to stop the default action of an element from happening:

$(document).ready(function(){
  $('form').submit(function(e){
    if($("#first").val().match('^[a-zA-Z]{3,16}$')){
       alert("valid");
    }
    else{
      e.preventDefault();
      $("#error_msg").after("invalid");
    }
  })
})

answered Sep 06 '17 at 09:39

SilverSurfer

4,281
6
24
50

but if i try to click submit again error message(invalid) is showing continuously like invalidinvalidinvalid – tamil Sep 06 '17 at 10:29

XYZ · Accepted Answer · 2017-09-06T10:25:47.217

1

Use event.preventDefault().If this method is called, the default action of the event will not be triggered.

$(document).ready(function() {
  $('form').submit(function(event) {
    if ($("#first").val().match('^[a-zA-Z]{3,16}$')) {
      alert("valid");
    } else {
       $("#error_msg").empty().text("invalid");
       alert("invalid");
      event.preventDefault();
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="first">
<div id="error_msg"></div>
<button type="submit">submit</button>
</form>

edited Sep 06 '17 at 10:25

answered Sep 06 '17 at 09:39

XYZ

4,450
2
15
31

thanks sujith tahnks for your expalanation i got an answer – tamil Sep 06 '17 at 10:41

score 0 · Answer 3 · answered Sep 06 '17 at 09:43

0

Use return false;

$(document).ready(function(){
  $('form').submit(function(e){
    if($("#first").val().match('^[a-zA-Z]{3,16}$')){
       alert("valid");
    }
    else{      
      $("#error_msg").after("invalid");
       return false;
    }
  })
})

answered Sep 06 '17 at 09:43

Athul Nath

2,536
1
15
27

@tamil Have u got the answer? – Athul Nath Sep 06 '17 at 10:04

score 0 · Answer 4 · answered Sep 06 '17 at 09:45

Use return false or preventDefault() method to stop the action :

$(document).ready(function(){
  $('form').submit(function(e){
    if($("#first").val().match('^[a-zA-Z]{3,16}$')){
       alert("valid");
    }
    else{
      $("#error_msg").after("invalid");
      return false;
      //or
      e.preventDefault();
    }
  })
})

in jquery validation the error message disappears quickly

4 Answers4