$(document).ready(function(){
$("#submit").click(function(){
var userinput = $('#username').val();
var mobilenumber=$('#mobnum').val();
var address1=$('#addr1').val();
var address2=$('#addr2').val();
var characterReg = /^([a-zA-Z]{2,30})$/;
var numericReg=/^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
var emailReg=/^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/;
var addrReg = /^\s*[a-zA-Z0-9,\s]+\s*$/;
var errors=false;
if(!characterReg.test(userinput)){
$('#username').addClass('box alert');
errors=true;
}else{
$('#username').removeClass('box alert');
}
if(!numericReg.test(mobilenumber)){
$('#mobnum').addClass('box alert');
errors=true;
}else{
$('#mobnum').removeClass('box alert');
}
if($('#mail').val()==''){
$('#mail').addClass('box alert');
errors=true;
}else{
$('#mail').removeClass('box alert');
}
if($('#pwd').val()==''){
$('#pwd').addClass('box alert');
errors=true;
}else{
$('#pwd').removeClass('box alert');
}
if(!addrReg.test(address1)){
$('#addr1').addClass('box alert');
errors=true;
}else{
$('#addr1').removeClass('box alert');
}
if(!characterReg.test(address2)){
$('#addr2').addClass('box alert');
errors=true;
}else{
$('#addr2').removeClass('box alert');
}
if(errors){
return false;
}else{
return true;
}
});
});
.box{
border-color: red;
}
.alert{
color:#a94442;
background-color: #f2dede;
border:#ebccd1;
opacity: 1;
padding:10px;
}
form{
margin-top:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="alert">
"Missing required field"
</div>
<form method="post" id="user_form">
NAME <br>
<input type="text" name="username" id="username" class="req" ><br>
MOBILE NUMBER <br>
<input type="text" name="mobnum" id="mobnum" class="req" maxlength="10"><br>
E-MAIL <br>
<input type="email" name="mail" id="mail" class="req" ><br>
PASSWORD <br>
<input type="password" name="pwd" id="pwd" class="req" ><br>
ADDRESS 1<br>
<input type="text" name="addr1" id="addr1" class="req" ><br>
ADDRESS 2<br>
<input type="text" name="addr2" id="addr2" class="req" ><br>
<button type="submit" id="submit">Submit</button>
</form>
</body>
</html>
我寫了這個代碼的形式validation..here如果我點擊提交,而無需輸入它應該顯示文本框顏色的值,並且「缺少必填字段」在頂部頁面..我添加的代碼..但是當我點擊提交沒有輸入值..「警報」類應該只適用於div ..不適用於文本框..是我的代碼是否正確?
並不清楚你所問這裏。 – Afsar
當我點擊提交沒有值..文本框的顏色必須改變..並在頁面頂部我應該顯示錯誤消息..輸入值後,我想隱藏它 – moksha
你的意思是沒有按下提交按鈕,你想在字段上隱藏這些錯誤顏色? – Bharat