Validate text box using jquery

Question

I have several asp text box inside my aspx page. And there is no enough space to show Requred field validator messages. Is there any solution to this? using jquery or something else?

Answer 1

You can simply highlight the text-box with Red border to mark that their is an issue with the text-box data.

You can use CSS like this:

input.error  
{ 
   background: Yellow; border: 1px solid red; 
}

On error, just add the class to the input and also input tooltip

$("input").addClass("error").attr('title', 'An error occurred!');

Answer 2

Try below code :

$(":text").each(function(){
    if($(this).val()==""){
    $(this).css("background-color","red");
    alert($(this).attr("id") & " validate error");  
    return
    }

});

Answer 3

You can use both javascript or jQuery, by validate data and then turn back your message in to the input if it is not validated. ex:

if($('#idOfFeild').val()==''){
    $('#idOfFeild').val('Please input your data');
}

You can add style too to warn your users!

Answer 4

You can read this article :http://www.codeproject.com/Articles/43772/Generic-Code-of-Validating-Fields-with-Jquery and them try this code :

<script type="text/javascript">
    <script src="JavaScript/jquery.js" type="text/javascript"></script>
   function callOnload()
   {
      $("input[isvalidate=true]").each(
                              function(n)
                              {
                                 $('#' +this.id).addClass('mandatory');
                                 this.onkeyup=function()
                                 {
                                    if(this.value==='')
                                    {
                                       $('#' +this.id).removeClass('normal');
                                       $('#' +this.id).addClass('mandatory');
                                    }
                                    else
                                    {
                                       $('#' +this.id).removeClass('mandatory');
                                       $('#' +this.id).addClass('normal');
                                    }
                                 }
                              }
                        );

         $("#btnSubmit").click(
                              function()
                              {
                                  $("input[isvalidate=true]").each(
                                  function(n)
                                  {
                                     if(this.value==='')
                                     {
                                        alert($('#' +this.id).attr('errprMsg'));
                                     }
                                  }
                                 );
                                return false;
                              }
                           );
   }
   $(document).ready(callOnload);
</script>

Answer 5

Yes obviously, you have a very simple solution.

you don't have to use any jquery stuff. you just have to use asp:validationSummary.

I'm posting here solution. with this you can show all error messages in simple popup by using standard asp validation controls. It won't consume any space on your page.

Have a look on code below:

<asp:ValidationSummary ID="validation1" runat="server" ShowMessageBox="true"  ShowSummary="false" DisplayMode="SingleParagraph" ValidationGroup="abc" />

<asp:TextBox ID="txtAge" runat="server" ></asp:TextBox>

<asp:RequiredFieldValidator ID="req" runat="server" ControlToValidate="txtAge" Display="None" ValidationGroup="abc" ErrorMessage="Field Required"></asp:RequiredFieldValidator>

 <asp:Button ID="btn" Text="click"  runat="server" ValidationGroup="abc" />

Here i have set ShowMessageBox="true" in Validation Summary, which will show all error messages in popup.

Set your validators Display="none", so that the error messages display only in the popup.

the error message will look like below image. You don't have to worry about to manage space of page.

It is perfect , easy and simple solution for your problem.

Let me know, if it works for you.

Answer 6

Alternativly to alert() you can use your own validator and color text or textbox. I have got small example on my page and you can adapt it. Add css class: http://kjinit.blogspot.com/2013/03/jquery-dynamic-adding-css-class.html and remove css class.

Of course first you need to validate it like this: if('#yourInputId').val(''); Just color your text adding or removing css class when it is correct or not.