simple form validation using jquery
i have very simple basic form in HTML and i want to validate the form using jquery..
i tried using bassistance.de validation plugins but did not work
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td align="right">First Name</td>
<td><input type="text" name="FirstName" class=" text hasCorners"></td>
</tr>
<tr>
<td align="right">Last Name</td>
<td><input type="text" name="LastName" class=" text hasCorners"></></td>
</tr>
&开发者_StackOverflow中文版lt;tr>
<td align="right">EMail</td>
<td><input type="text" name="Email" class=" text hasCorners"></></td>
</tr>
<tr>
<td align="right">Phone</td>
<td><input type="text" name="Phone" class=" text hasCorners"></></td>
</tr>
<tr>
<td align="right">Address</td>
<td><textarea cols="20" rows="5" name="Address" class=" text hasCorners"></></textarea></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<SELECT name="Country" class=" text hasCorners"></>
<option value="" selected>[choose yours]
<option value="008">Albania
<option value="012">Algeria
<option value="016">American Samoa
<option value="020">Andorra
<option value="024">Angola
<option value="660">Anguilla
<option value="010">Antarctica
<option value="028">Antigua And Barbuda
<option value="032">Argentina
<option value="051">Armenia
<option value="533">Aruba
</SELECT>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
Have a look and try this
==============
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<!-- Popper JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class ="container">
<h3 class = "text-center">Sample Form to be validate</h3>
<div class = "col-lg-8 m-auto d-block">
<form action = "www.sjflksdf.com" id = "myform">
<div class = "form-group">
<label for = "user">UserName</label>
<input type = "text" id = "username" name = "username" class = "form-control"
autocomplete = "off">
<h5 id = "usermessage"></h5>
</div>
<div class = "form-group">
<label for = "password">Password</label>
<input type = "text" id = "password" name = "password" class = "form-control">
<h5 id = "passwordmessage"></h5>
</div>
<div class = "form-group">
<label for = "conpassword">Confirm Password</label>
<input type = "text" id = "conpassword" name = "conpassword" class = "form-control">
<h5 id = "conpasswordmessage"></h5>
</div>
<div class = "form-group">
<input type = "submit" id = "btnsubmit" value = "Submit" name = "btnsubmit" class =
"btn btn-primary" >
</div>
</form>
</div>
</div>
</body>
<script type = "text/javascript">
$(document).ready(function(){
debugger
$('#usermessage').hide();
$('#passwordmessage').hide();
$('#conpasswordmessage').hide();
var user_err = true;
var pass_err = true;
var conpass_err = true;
$('#username').keyup(function(){
user_check();
});
$('#password').keyup(function(){
pass_check();
});
$('#conpassword').keyup(function(){
pass_compair();
});
function pass_check()
{
var pass_value = $('#password').val();
if(pass_value.length == '' || pass_value.length <= 6){
$('#passwordmessage').show();
$('#passwordmessage').html("**please fill out password having length > 6");
$('#passwordmessage').focus();
$('#passwordmessage').css ("color","red");
conpass_err = false;
return false;
}else{
$('#passwordmessage').hide();
}
}
function pass_compair()
{
var pass_value = $('#password').val();
var passcompair_value = $('#conpassword').val();
if(pass_value != passcompair_value){
$('#conpasswordmessage').show();
$('#conpasswordmessage').html("** Repeat password not matched");
$('#conpasswordmessage').focus();
$('#conpasswordmessage').css ("color","red");
pass_err = false;
return false;
}else{
$('#conpasswordmessage').hide();
}
}
function user_check()
{
var user_val = $('#username').val();
if( user_val.length == ''){
$('#usermessage').show();
$('#usermessage').html("** Please fill out the UserName");
$('#usermessage').focus();
$('#usermessage').css ("color","red");
user_err = false;
return false;
}else{
$('#usermessage').hide();
}
}
$('#btnsubmit').click(function(){
user_err = true;
pass_err = true;
conpass_err = true;
debugger
user_check();
pass_check();
pass_compair();
if((user_err = true) && (user_err = true) && (user_err = true))
{
//console.log($('#password').val());
// ajax post data here...
return true;
}else
{
return false;
}
});
});
</script>
</html>
I have been using for a while the JQuery Yab plugin, take a look, it is nice.
加载中,请稍侯......
精彩评论