locked
check bootstrap required RRS feed

  • Question

  • User-1937501809 posted

    I'm showing loading box on my button click event.  But before that I have to check if the bootstrap required is false means wherever I had put bootstrap required, it should be fulfilled

    Monday, July 4, 2016 9:13 PM

Answers

  • User475983607 posted

    sandip5264

    I tried like

    if($.form.valid()) {

    alert ('valid;);

    }

    But it didn't work

    What validation are you using HTML 5, JQuery validate, or something else?  

    Let's just cut to the chase.  Here is how to validate a form if you are using HTML 5.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RequireTextbox.aspx.cs"
        Inherits="WebAppDemo.RequireTextbox" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
       <%-- <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script> --%>
        <script type="text/javascript">
            $(function () {
                $('#Button1').click(function () {
                    console.log("The form is valid: " + $('#form1')[0].checkValidity());
                    //console.log("The form is valid: " + $('#form1').valid());
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" required="" runat="server"></asp:TextBox>
            <input id="Button1" type="button" value="button" />
        </div>
        </form>
    </body>
    </html>

    This example uses JQuery Validate.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RequireTextbox.aspx.cs"
        Inherits="WebAppDemo.RequireTextbox" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script> 
        <script type="text/javascript">
            $(function () {
                $('#Button1').click(function () {
                    //console.log("The form is valid: " + $('#form1')[0].checkValidity());
                    console.log("The form is valid: " + $('#form1').valid());
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" required="" runat="server"></asp:TextBox>
            <input id="Button1" type="button" value="button" />
        </div>
        </form>
    </body>
    </html>
    

    The first step is to identify the validate you're using the read the reference docs.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 5, 2016 6:54 PM

All replies

  • User-474980206 posted

    bootstrap does not have a required. only CSS for status states. which validation library are your using?

    Monday, July 4, 2016 11:51 PM
  • User61956409 posted

    Hi sandip5264,

    sandip5264

    I'm showing loading box on my button click event.  But before that I have to check if the bootstrap required is false means wherever I had put bootstrap required, it should be fulfilled

    The required attribute marks any input/textarea as being required to have a value before the form can be submitted. Do you use any jQuery Validation plugin? Could you share us a sample to reproduce the issue?

    Best Regards,

    Fei Han

    Tuesday, July 5, 2016 6:43 AM
  • User-1937501809 posted

    Okay, see this is my login form.  I'm asing user for mail id and password

    <asp:TextBox ID="txtMail" runat="server" placeholder="Enter your mail id" required type="email"></asp:TextBox>
    <asp:TextBox ID="txtPass" runat="server" placeholder="Enter your password" TextMode ="Password" required ></asp:TextBox>
    
    <asp:Button ID="Button2" runat="server" Text="Login to A/c" CssClass="real-btn btn-mini" OnClientClick="showprogress();" ></asp:Button>

    So, when user press submit button it checks "required" if input box doesn't have  value it doesn't executes.  Now I'm calling showprogress function which shows loading message.  In this function I have to check if the required is fulfil.  Now it's showing me progressbar even the required is false

    Tuesday, July 5, 2016 11:37 AM
  • User-1937501809 posted

    So do you mean this that I have to check all the input box again on my submit button?  Is there any function like isform.valid

    Tuesday, July 5, 2016 1:27 PM
  • User475983607 posted

    sandip5264

    So do you mean this that I have to check all the input box again on my submit button?  Is there any function like isform.valid

    JQuery validate has a $form.valid() if you want to go that route.

    Tuesday, July 5, 2016 2:12 PM
  • User-1937501809 posted

    I tried like

    if($.form.valid()) {

    alert ('valid;);

    }

    But it didn't work

    Tuesday, July 5, 2016 6:50 PM
  • User475983607 posted

    sandip5264

    I tried like

    if($.form.valid()) {

    alert ('valid;);

    }

    But it didn't work

    What validation are you using HTML 5, JQuery validate, or something else?  

    Let's just cut to the chase.  Here is how to validate a form if you are using HTML 5.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RequireTextbox.aspx.cs"
        Inherits="WebAppDemo.RequireTextbox" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
       <%-- <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script> --%>
        <script type="text/javascript">
            $(function () {
                $('#Button1').click(function () {
                    console.log("The form is valid: " + $('#form1')[0].checkValidity());
                    //console.log("The form is valid: " + $('#form1').valid());
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" required="" runat="server"></asp:TextBox>
            <input id="Button1" type="button" value="button" />
        </div>
        </form>
    </body>
    </html>

    This example uses JQuery Validate.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RequireTextbox.aspx.cs"
        Inherits="WebAppDemo.RequireTextbox" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script> 
        <script type="text/javascript">
            $(function () {
                $('#Button1').click(function () {
                    //console.log("The form is valid: " + $('#form1')[0].checkValidity());
                    console.log("The form is valid: " + $('#form1').valid());
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" required="" runat="server"></asp:TextBox>
            <input id="Button1" type="button" value="button" />
        </div>
        </form>
    </body>
    </html>
    

    The first step is to identify the validate you're using the read the reference docs.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 5, 2016 6:54 PM
  • User2053451246 posted

    if($.form.valid()) {

    alert ('valid;);

    }

    If that's the exact code you are using you have some syntax errors.  You are missing the closing quote on 'valid' and you have an extra ; in there.

    Tuesday, July 5, 2016 6:55 PM