HTML5验证和AJAX调用WebService [英] HTML5 validation and AJAX calling WebService
问题描述
我是WEB开发人员的最新版本，我确信这个问题很容易解决（我希望）
我有一个简单的注册表单，其中包含HTML5输入（参见下面的MarkUp） ）标准验证为recquired，type等。
另外，我有一个调用WebService的AJAX函数.....
然后....问题是什么？
如果我点击按钮，webservice上的电话会首先跳HTML5验证....我需要验证字段，如果这些字段正常，则调用WebService。
表格代码[MarkUp]：
<％@ Page Language =C＃AutoEventWireup =trueCodeBehind =Registro.aspx.csInherits =CP_External_Connections.Registro％>
<！DOCTYPE html>
< html lang =es>
< head runat =server >
< title>某些标题< / title>
< link rel =stylesheetmedia =screenhref = styles.css/>
<！ - [if IE]>
< script src =http://html5shiv.googlecode.com/ svn / trunk
/html5.js\"></script>
<！[endif] - >
< ; script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js>< / script>
< script type =text / javascriptsrc =http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（＃BtnSubmit）。click（function（e）{
e.preventDefault（）;
$ .ajax（{
类型：POST，
url：MyWebService.asmx / Method1，
数据：{_ LOGINName：'+ $（＃Nombre）。val（）+'，_ Nombre：'+ $（＃Nombre）。val（）+'，_Apellidos：' + $（＃Apellidos）。val（）+'，_ Password：'+ $（＃Password）。val（）+'，_ Mail：'+ $（＃Email）。 val（）+'}，
dataType：'json'，
contentType：application / json; charset = utf-8，
async：false，
成功：函数（数据）{
alert（data.d）; //显示返回的字符串，这将是xml包装器内的数据
}，
错误：函数（e）{
alert（错误文本。）;
}
}）;
}）;
}）;
< / script>
< / head>
< body>
< form id =form1runat =serverclass =contact_formmethod =post>
-
我的表格
- < label for =Nombre> Nombre：< / label>
< input type =textname =_ Nombreid =Nombre占位符=胡安需要/>
- < label for =Apellidos> Apellidos：< / label>
< input type =textname =_ Apellidosid =Apellidos 占位符=PérezDíaz必需/>
- < label for =email>电子邮件：< / label>
< input type =emailname =emailid =Email占位符=MiEmail@ejemplo.com需要/>
- < label for =password>Contraseña：< / label>
< input type =textname =_ Passwordid =Passwordplaceholder =MiEmail @ ejemplo.com必需/>
- < button class =submittype =submitid =BtnSubmitvalue =CrearUsuario>注册< / button>
-
My Form
- <label for="Nombre">Nombre:</label>
<input type="text" name="_Nombre" id ="Nombre" placeholder="Juan" required />
- <label for="Apellidos">Apellidos:</label>
<input type="text" name="_Apellidos" id ="Apellidos" placeholder="Pérez Díaz" required />
- <label for="email">Email:</label>
<input type="email" name="email" id ="Email" placeholder="MiEmail@ejemplo.com" required />
- <label for="password">Contraseña:</label>
<input type="text" name="_Password" id="Password" placeholder="MiEmail@ejemplo.com" required />
- <button class="submit" type="submit" id="BtnSubmit" value="CrearUsuario">Registrarse</button>
Hi, I'm newest on WEB developer, I'm sure that the problem is soo easy to resolve (I hope)
I have a simply registry form with HTML5 input's (see MarkUp below) with standard validation as recquired, type, etc.
In addition, I have a AJAX function that call a WebService.....
Then.... what's the problem?
If I make click at button, the call at webservice fire's firstly jumping HTML5 validations....and I need validate the fields and if this ones are OK, then call the WebService.
Form Code [MarkUp]:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Registro.aspx.cs" Inherits="CP_External_Connections.Registro" %>
<!DOCTYPE html>
<html lang="es">
<head runat="server">
<title>Some Title</title>
<link rel="stylesheet" media="screen" href="styles.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
<![endif]-->
<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://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#BtnSubmit").click(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "MyWebService.asmx/Method1",
data: "{ _LoginName: '" + $("#Nombre").val() +"', _Nombre: '" + $("#Nombre").val() + "', _Apellidos: '" + $("#Apellidos").val() +"', _Password: '" + $("#Password").val() + "', _Mail: '" + $("#Email").val()+"' }",
dataType: 'json',
contentType: "application/json; charset=utf-8",
async: false,
success: function (data) {
alert(data.d); // show the string that was returned, this will be the data inside the xml wrapper
},
error: function (e) {
alert("Error text.");
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server" class="contact_form" method="post">
推荐答案
（document）.ready（function（）{
(document).ready(function () {
（＃BtnSubmit）。click（function（e）{
e。 preventDefault（）;
("#BtnSubmit").click(function (e) {
e.preventDefault();
.ajax（{
type：POST，
url：MyWebService。 asmx / Method1，
数据：{_ LOGINName：'+
.ajax({
type: "POST",
url: "MyWebService.asmx/Method1",
data: "{ _LoginName: '" +
这篇关于HTML5验证和AJAX调用WebService的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
