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.