CODEWITHSUNDEEP
javascriptjqueryajaxhtml
Swathi
Swathi

Reputation: 71

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>

Upvotes: 2

Views: 3654

Answers (3)

FAROUK BLALOU
FAROUK BLALOU

Reputation: 728

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({ 

   ... 

   })

}

Upvotes: 1

Fotis Grigorakis
Fotis Grigorakis

Reputation: 361

Replace your line with this:

<input type="text" name="uname"  value="<?php echo set_value('uname'); ?>" /><div id="infoMessage"><?php echo form_error('uname'); ?></div></br>

And change the variables names so they match with your variables names.
Read the CI documentation for more informations.

Upvotes: 0

mmmorgen
mmmorgen

Reputation: 61

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 id='error_msg' class="yourcssclass"></span>

            <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){ 
                                         document.getElementById('error_msg').innerHTML='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('');
                                    }
                                },

Upvotes: 0

Related Questions