How can we display error messages below textbox using jquery/javascript plugin?

Question

I am trying to display error message below the "edit-first-name" field. But It is not displaying error message. Could someone please tell where I am going wrong?

<HTML>
    <div class= "col-xs-12 col-sm-12 col-md-6 highlight" > 
    <form id= "editform" class= "userform" method= "post"> 
    <label class= "bold" for= "first-name" > First Name: </label> 
    <input id= "edit-first-name" type= "text" name= "first-name" 
     maxlength= "128" class= "required"
    data-msg= "Please provide First Name" placeholder= "First Name" value= ""> 
    <div class="row md-gray-bg margin-md-0">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <input id="cbot-save-ticket" tabindex="100" type="submit"
               class="button pull-right ignore"
               value="Save Ticket"/>
    </div>
</HTML>

Javascript:
<script type="text/javascript">
    document.getElementById("editform").addEventListener('submit',
    function  (event) {
    var focusSet = false;
    var fname = document.getElementById("edit-first-name");
    if(!(fname.value.length))
     {
       fname.after().html("<div class='msg-error' style='color:red;
       margin-bottom: 20px;'>Please enter email</div>");
        event.preventDefault();
        fname.focus();

     }
     });

Senjuti Mahapatra · Accepted Answer · 2016-05-20 08:51:44Z

after() is a jquery method. The after() method inserts specified content after the selected elements, but you need to include jquery for using it. You can simply put the error message div hidden, and when the validation fails, display the error message div. Below is the code snippet for the same.

document.getElementById("editform").addEventListener('submit',
    function  (event) {
    var focusSet = false;
    var fname = document.getElementById("edit-first-name");
    if(!(fname.value.length))
     {
        document.getElementById('msg-error').style.display = 'block';
        event.preventDefault();
        fname.focus();

     }
     });

<div class= "col-xs-12 col-sm-12 col-md-6 highlight" > 
    <form id= "editform" class= "userform" method= "post"> 
    <label class= "bold" for= "first-name" > First Name: </label> 
    <input id= "edit-first-name" type= "text" name= "first-name" 
     maxlength= "128" class= "required"
    data-msg= "Please provide First Name" placeholder= "First Name" value= ""> 
      <div class='msg-error' id='msg-error' style='color:red;margin-bottom: 20px;display:none;'>Please enter email</div>
    <div class="row md-gray-bg margin-md-0">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <input id="cbot-save-ticket" tabindex="100" type="submit"
               class="button pull-right ignore"
               value="Save Ticket"/>
    </div>

Collectives™ on Stack Overflow

How can we display error messages below textbox using jquery/javascript plugin?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related