Click here to Skip to main content
15,886,664 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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">


  • 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>




</form>
</body>
</html>
Posted
Comments
Madhav Hatwalne 9-Feb-15 4:08am    
i am not able to understand what exact problem you have!
.... what's the problem?
jmcabalor 9-Feb-15 5:35am    
My problem is when make click on button fires the call to the webservice declarated en AJAX function....but without validating the fields....the html5 validation of inputs don't fire. If I remove the AJAX function and click button, the html5 validation fires correctly. (Sorry, my english is too poor)...I need firstly validate the fields (html5 validation standard) and if the fields are OK then call de webservice.....
jmcabalor 10-Feb-15 2:17am    
any idea?

1 solution

You shouldn't rely on native html5 validation.
It's not supported by all browsers.

I see you are using jQuery, so have a look at http://jqueryvalidation.org/[^]

It's simple to use and works like a charm.

Oh and also maybe use the type="password" on the password field.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900