Sav2907,
/^\d[A-Z]{2}\d{8}$/ |
рони,
да, это оно, спасибо |
Привет, как заблокировать поле name пока не заполнено поле phone, после заполнения phone заблокировать и разблокировать name. Полей может быть больше. Например 5 полей, 1 разблокировано все остальные заблокированы, после заполнения 1-го, разблокировать 2-е и заблокировать 1-е и т.д.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</script>
<style type="text/css">
label.error {
position: absolute;
margin-left: 12px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<script>
$.validator.addMethod("minlenghtphone", function (value, element) {
return /^\d[A-Z]{2}\d{8}$/.test(value);
},
" не соответствует формату");
$.validator.addMethod("requiredphone", function (value, element) {
return value.length > 1;
},
" Заполните это поле!!!");
$.validator.addMethod("minlenghtname", function (value, element) {
return value.replace(/\D+/g, '').length > 15;
},
" Маловато циферок будет!");
$.validator.addMethod("requiredname", function (value, element) {
return value.replace(/\D+/g, '').length > 1;
},
" Заполните это поле!!!");
$(function () {
$("#commentForm").validate({
rules: {
phone: {
requiredphone: true,
minlenghtphone: true
},
name: {
requiredname: true,
minlenghtname: true
}
}
})
});
</script>
</head>
<body>
<center>
<form class="cmxform" id="commentForm" method="get" action="">
<p><input class="left" id="phone" name="phone" maxlength="11"></p>
<p><input class="left" id="name" name="name" maxlength="16"></p>
<p><input class="submit" type="submit" value="Submit"/></p>
</form>
</center>
</body>
</html>
|
Sav2907,
Цитата:
|
Ок, а 1-е разблокировано все остальные заблокированы, после заполнения 1-го, разблокировать 2-е и т.д. ?
|
рони,
?? |
validate последовательное заполнение формы
Sav2907, строка 52 заполнить по порядку заполнения,
читать документацию и придумывать алгоритмы решения самостоятельно. http://jqueryvalidation.org/documentation/
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</script>
<style type="text/css">
label.error {
position: absolute;
margin-left: 12px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<script>
$.validator.addMethod("minlenghtphone", function (value, element) {
return /^\d[A-Z]{2}\d{8}$/.test(value);
},
" не соответствует формату");
$.validator.addMethod("requiredphone", function (value, element) {
return value.length > 1;
},
" Заполните это поле!!!");
$.validator.addMethod("minlenghtname", function (value, element) {
return value.replace(/\D+/g, '').length > 15;
},
" Маловато циферок будет!");
$.validator.addMethod("requiredname", function (value, element) {
return value.replace(/\D+/g, '').length > 1;
},
" Заполните это поле!!!");
$(function () {
var validator = $("#commentForm").validate({
rules: {
phone: {
requiredphone: true,
minlenghtphone: true
},
name: {
requiredname: true,
minlenghtname: true
}
}
})
var arrId = ["#phone", "#name"];
$.each(arrId, function(indx, id) {
var next = arrId.slice(++indx);
if (next.length) {
next += "";
var fn = function() {
validator.element(id) ? $(next).removeAttr("disabled") : $(next).prop("disabled", true)
};
$(id).on("input", fn);
$(next).prop("disabled", true)
}
});
});
</script>
</head>
<body>
<p id="summary"></p><center>
<form class="cmxform" id="commentForm" method="get" action="">
<p><input class="left" id="phone" name="phone" maxlength="11"></p>
<p><input class="left" id="name" name="name" maxlength="16" ></p>
<p><input class="submit" type="submit" value="Submit"/></p>
</form>
</center>
</body>
</html>
|
рони,
Спасибо мастер |
Не работает разблокировка
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>ЗС</title>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<style>
body {
background: #2f3238
}
label.error {
position: absolute;
margin-left: 12px;
color: #fff;
font-size: 20px;
}
</style>
<script>
$.validator.addMethod("min_Part_number", function (value, element) {
return /^\d[A-Z]{2}\d{10}$/.test(value);
},
"Не відповідає формату 3FC3333333333!");
$.validator.addMethod("required_Part_number", function (value, element) {
return value.length > 1;
},
"Заповніть це поле!");
$.validator.addMethod("min_Order_number", function (value, element) {
return /^\d{7}$/.test(value);
},
"Не відповідає формату 1234567!");
$.validator.addMethod("required_Order_number", function (value, element) {
return value.length > 1;
},
"Заповніть це поле!");
$.validator.addMethod("min_Quantity", function (value, element) {
return value.replace(/\D+/g, '').length > 0;
},
"Не відповідає формату 100!");
$.validator.addMethod("required_Quantity", function (value, element) {
return value.replace(/\D+/g, '').length > 0;
},
"Заповніть це поле!");
$.validator.addMethod("min_Ticket_number", function (value, element) {
return /^\d{10}$/.test(value);
},
"Не відповідає формату 0123456789");
$.validator.addMethod("required_Ticket_number", function (value, element) {
return value.length > 1;
},
"Заповніть це поле!");
$(function () {
$("#forma").validate({
rules: {
Part_number: {
required_Part_number: true,
min_Part_number: true
},
Order_number: {
required_Order_number: true,
min_Order_number: true
},
Quantity: {
required_Quantity: true,
min_Quantity: true
},
Ticket_number: {
required_Ticket_number: true,
min_Ticket_number: true
}
}
})
var arrId = ["#Part_number", "#Order_number", "#Quantity", "#Ticket_number"];
$.each(arrId, function(indx, id) {
var next = arrId.slice(++indx);
if (next.length) {
next += "";
var fn = function() {
validator.element(id) ? $(next).removeAttr("disabled") : $(next).prop("disabled", true)
};
$(id).on("input", fn);
$(next).prop("disabled", true)
}
});
});
</script>
<script>
function testJump(x){
var ml = ~~x.getAttribute('maxlength');
if(ml && x.value.length >= ml){
var target;
do{
x = x.nextSibling;
}
while(x && !(/text/.test(x.type)));
if(x && /text/.test(x.type)){
x.focus();
}
}
}
</script>
</head>
<body>
<div style="width: 1000px; margin: auto;">
<form name="forma1" method="POST" id="forma" action="add_1.php" onkeypress="if(event.keyCode == 13) return false;">
<center><span style="color: #fff; font-size: 1.5em;">Part number</span><br />
<input type="text" id="Part_number" name="Part_number" maxlength="13" onkeyup="testJump(this);" style="text-align: center;"/><br />
<span style="color: #fff; font-size: 1.5em;">Order number</span><br />
<input type="text" id="Order_number" name="Order_number" maxlength="7" onkeyup="testJump(this);" style="text-align: center;"><br />
<span style="color: #fff; font-size: 1.5em;">Quantity</span><br />
<input type="text" id="Quantity" name="Quantity" onkeyup="testJump(this);" maxlength="3" style="text-align: center;"><br />
<span style="color: #fff; font-size: 1.5em;">Ticket number</span><br />
<input type="text" id="Ticket_number" name="Ticket_number" maxlength="10" onkeyup="testJump(this);" style="text-align: center;"><br />
<center><input type="submit" class="btn" value="Ок"/></center>
</form>
</div>
</body>
</html>
|
Sav2907,
[html run][/html] |
| Часовой пояс GMT +3, время: 21:29. |