Error doesnt get displayed in span tag on form submit in html - Jquery

Question

I am new to jquery. I am trying to create a form in which if the user does not enter username the user will get a error. I have created a form which has input text, a span tag and a button. If i click on the button and the username field, the span tag should be visible.

My HTML code looks like:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
  <script src="jquery-1.9.1.min.js"></script>
<script src="check1.js"></script>

<body>      
  <div>
    <form id="myform" method="post">
            <table border="1">
              <tr>
                <td>
                  <input type="text" id="uname"/>
                </td>
                <td>
                  <span class="error">please enter data</span>
                </td>
              </tr>
              <tr>
                <td>
                  <button id="check"> submit</button>                      
                </td>
              </tr>
            </table>
    </form>
  </div>                
</body>

My style.css file:

.error
{
    visibility: hidden;
}

.error_show
{
    visibility: visible;
    color: red;

}

And the JQuery file:

$(document).ready(function() {
    $("#myform").on("submit", function(){
        var uname = $("#uname").val();
        if(uname == "")
        {
            $(".error").addClass("error_show");
        }
    });

});

I have used form submit in JQuery. The error gets diaplayed for less than a second. Why is that happening? Is there anything wrong in the code?

because form is getting submitted.nothing is wrong in your code it behaves like it should — guradio
– guradio, Commented Dec 2, 2015 at 4:41

Ramanlfc · Accepted Answer · 2015-12-02 04:42:51Z

2

disable the default behaviour of submit event with preventDefault()

  $("#myform").on("submit", function(e){
        e.preventDefault();
          ....rest of your code     
    });

answered Dec 2, 2015 at 4:42

Ramanlfc

8,3541 gold badge21 silver badges24 bronze badges

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

2 Comments

Aniruddh Jhavar Over a year ago

thanks a lot! it worked. Can you explain what exactly does e.preventDefault(); does?

Ramanlfc Over a year ago

@AniruddhJhavar it cancels out the default behaviour of any event developer.mozilla.org/en/docs/Web/API/Event/preventDefault

Steve · Accepted Answer · 2015-12-02 04:44:15Z

1

You should do you validation on the click event of the submit button, then if it passes call submit on the form itself.

Also, notice the e.preventDefault(). This prevents the form from submitting before you tell it to.

$("#check").click(function(e) {
    e.preventDefault();
    var uname = $("#uname").val();
    if(uname == "")
    {
        $(".error").addClass("error_show");
    } else {
        $("#myform").submit();
    }
});

answered Dec 2, 2015 at 4:44

Steve

9,63511 gold badges57 silver badges86 bronze badges

2 Comments

Aniruddh Jhavar Over a year ago

Is form on submit not preferred or is there any other reason why you used button click?

Steve Over a year ago

This is really the main reason, to do validation before the form is submitted, while in your method the form has been submitted and you need to cancel it if validation fails. Better to check first.

Collectives™ on Stack Overflow

Error doesnt get displayed in span tag on form submit in html - Jquery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related