Swathi Swathi - 3 years ago 72
jQuery Question

without alert message how to display the error message in below text filed in a form

How to display the error message in below text field, below shown script and form without alert message?

script

success: function (data)
{
scrollDown();

var message = $("#messagee").val();

if(message == "" || message == null){
alert("enter a message");
}
else {
$('#chat_log').append('<div class="row msg_container base_receive"><div class="col-md-12 col-xs-12"><div class="messages msg_receive"><p><a>' + message + '</a></p></div></div></div>');
$('#messagee').val('');
}
},


form

<form class="form-horizontal msg_fixed_bottom send_message_form" id="data_form" method="POST" role="form" action="#" onsubmit="return validation();">
<div class="panel-footer" id="myForm" >
<div class="input-group submit_group">
<input id="messagee" name="messagee" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." value="<?php echo set_value('messagee'); ?>" />


<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="submit" name="submit">Send</button>
</span>
</div>

Answer Source

You can add a hidden div after the input and show it only if you have errors.

html :

<div class="panel-footer" id="myForm" > 



    <div class="input-group submit_group"> 
        <input id="messagee" name="messagee" type="text" class="form-control input-sm chat_input" placeholder="Write your message here..." value="<?php echo set_value('messagee'); ?>" /> 

       <div id="errors" style="display:none;"></div>



        <span class="input-group-btn"> 
            <button class="btn btn-primary btn-sm" id="submit" name="submit">Send</button> 
        </span> 
    </div> 

js :

    success: function (data)
                            {
                                scrollDown();

                                var message = $("#messagee").val();

                                  if(message == "" || message == null){ 

                                      $("#errors").html("enter a message");
                                      $("#errors").fadeIn();
                                   }
                                else {
                                    $('#chat_log').append('<div class="row msg_container base_receive"><div class="col-md-12 col-xs-12"><div class="messages msg_receive"><p><a>' + message + '</a></p></div></div></div>');
                                    $('#messagee').val('');
                                }
                            },

don't forget to hide and empty the div at the beginning of your validation() function (Before the Ajax call):

function validation() {

   $("#errors").fadeOut();
   $("#errors").html("");

   $.ajax({ 

   ... 

   })

}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download