Form validation without form tag using jQuery in ASP.Net

Last Reply 25 days ago By dharmendr

Posted 25 days ago

how to create bootstrap validation for controls.

here i am not using form tag inside body tag. i want to submit button when mycontrols meet validation criteria (ie filled with data) 

reference from Insert (Update) Data to Database with jQuery AJAX and WebMethod in ASP.Net

below is the code 

<body>
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            Username:
        </td>
        <td>
            <asp:TextBox ID="txtUsername" runat="server" Text="" />
        </td>
    </tr>
    <tr>
        <td>
            Password:
        </td>
        <td>
            <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" />
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <asp:Button ID="btnSave" Text="Save" runat="server" />
        </td>
    </tr>
</table>
</body>

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=btnSave]").bind("click", function () {
            var user = {};
            user.Username = $("[id*=txtUsername]").val();
            user.Password = $("[id*=txtPassword]").val();
            $.ajax({
                type: "POST",
                url: "Default.aspx/SaveUser",
                data: '{user: ' + JSON.stringify(user) + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert("User has been added successfully.");
                    window.location.reload();
                }
            });
            return false;
        });
    });
</script>

 

public class User
{
    public string Username { get; set; }
    public string Password { get; set; }
}

[WebMethod]
[ScriptMethod]
public static void SaveUser(User user)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("INSERT INTO Users VALUES(@Username, @Password)"))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@Username", user.Username);
            cmd.Parameters.AddWithValue("@Password", user.Password);
            cmd.Connection = con;
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
}

 

Posted 25 days ago

Hi jovceka,

You must use a form element. You can't use server side control without form tag.

If you use you will get error Control 'txtUsername' of type 'TextBox' must be placed inside a form tag with runat=server.

So If you don't want to use form tag then you need to use html controls and using jquery validate the controls.

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=btnSave]").bind("click", function () {
                if ($("[id*=txtUsername]").val() != "" && $("[id*=txtPassword]").val() != "") {
                    $("[id*=lblUsername]").hide();
                    $("[id*=lblPassword]").hide();
                    var user = {};
                    user.Username = $("[id*=txtUsername]").val();
                    user.Password = $("[id*=txtPassword]").val();
                    $.ajax({
                        type: "POST",
                        url: "Default.aspx/SaveUser",
                        data: '{user: ' + JSON.stringify(user) + '}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            alert("User has been added successfully.");
                            window.location.reload();
                        }
                    });
                    return false;
                }
                else {
                    if ($("[id*=txtUsername]").val() == "") {
                        $("[id*=lblUsername]").show();
                    }
                    if ($("[id*=txtPassword]").val() == "") {
                        $("[id*=lblPassword]").show();
                    }
                }
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <td>Username:</td>
            <td>
                <input name="txtUsername" type="text" id="txtUsername" />
                <span id="lblUsername" style="color: Red; display: none;">Username required!</span>
            </td>
        </tr>
        <tr>
            <td>Password:</td>
            <td>
                <input name="txtPassword" type="password" id="txtPassword" />
                <span id="lblPassword" style="color: Red; display: none;">Password required!</span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" name="btnSave" value="Save" id="btnSave" /></td>
        </tr>
    </table>
</body>
</html>

Screenshot