web forms. How to do form validation via AJAX?

S

slam_V2014-11-11 18:33:29

JavaScript

slam_V, 2014-11-11 18:33:29

Given page:

Site.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="TestWeb.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.4.1.js"></script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <asp:ContentPlaceHolder ID="ScriptPlaceHolder" runat="server">
    </asp:ContentPlaceHolder>
    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    My ASP.NET Application
                </h1>
            </div>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">
        
    </div>
    </form>
</body>
</html>

Default.aspx:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="TestWeb._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>Test form</h2>
  <form action="Default.aspx">
    <table>
      <tr>
        <td><label for="name">Your name:</label></td>
        <td><input type="text" id="name" /></td>
      </tr>
      <tr>
        <td><label for="color">Your favourite color:</label></td>
        <td>
          <select id="color">
            <option>Green</option>
            <option>Red</option>
            <option>Yellow</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><label for="18-years">You are older than 18 years</label></td>
        <td><input type="checkbox" id="18-years" /></td>
      </tr>
      <tr>
        <td>Your favourite time of day:</td>
        <td>
          <input type="radio" id="radio-morning" /><label for="radio-morning">Morning</label><br />
          <input type="radio" id="radio-evening" /><label for="radio-evening">Evening</label><br />
          <input type="radio" id="radio-night" /><label for="radio-night">Night</label><br />
        </td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" /></td>
      </tr>
    </table>
    
  </form>
</asp:Content>

How to use jQuery to validate a form via AJAX on the server side?

I understand you need to add something like a script to the page:

<asp:Content ID="ScriptContent" runat="server" ContentPlaceHolderID="ScriptPlaceHolder">
<script type="text/javascript">
    $(document).ready(function () {

            var succeededAjaxFn = function (result) {

                alert("Good");
            }

            var failedAjaxFn = function (result) {

                alert("Bad");

            }

            $("submit").click(function () {
                var str = $( "form" ).serialize();
                PageMethod("GetMeAGUID", str, succeededAjaxFn, failedAjaxFn);
            });
    });
</script>
</asp:Content>

And add a validation function to the server code.
Tell me or tell me where to read how to do this?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

W

wkololo_4ever, 2014-11-11
@wkololo_4ever

"How to use jQuery to validate a form via AJAX on the server side?"
better read the literature on JS. JS is client-side, you don't implement server-side validation with it.
Maybe you need this www.codeproject.com/Articles/287278/Unobtrusive-Va... www.c-sharpcorner.com/UploadFile/cd7c2e/enabling-u...