我正在使用“添加其他网址”动态创建文本框。 我把url计数器只放了5个网址。
在此我使用jquery验证网址,然后提交最终网址。
但如果第一个网址不正确,如何禁用“添加其他网址”按钮。这样我就无法创建第二个或第三个文本框。
如果网址正确,则启用按钮。
代码如下
var current= 1;
$(document).ready(function() {
$("#addURL").click(function() {
if(current<5)
{
current++;
$newPerson= $("#userTemplate").clone(true);
$newPerson.children("p").children("label").each(function(i) {
var $currentElem= $(this);
$currentElem.attr("for",$currentElem.attr("for")+current);
});
$newPerson.children("p").children("input").each(function(i) {
var $currentElem= $(this);
$currentElem.attr("name",$currentElem.attr("name")+current);
$currentElem.attr("id",$currentElem.attr("id")+current);
});
$newPerson.appendTo("#mainField");
$newPerson.removeClass("hideElement");
//add validation
$("#url0"+current).rules("add", { required:true,url:true });
if(current == 5)
$("#addURL").hide();
}
});
$("#demoForm").validate({
rules: {
url1: {
required: true,
url: true
}
},
submitHandler: function(form) {
if($("#demoform").valid()) {
alert("hello");
}
}
});
console.log('r');
});
</script>
<style>
.hideElement {display:none;}
</style>
</head>
<body>
<form name="demoForm" id="demoForm" method="post" action="">
<fieldset id="mainField">
<div id="userTemplate" class="hideElement">
<p>
<label for="url0">Enter a valid URL</label> <em>* </em><input id="url0" name="url0" size="100" />
</p>
</div>
<div>
<p>
<label for="url1">Enter a valid URL</label>
<em>* </em><input id="url1" name="url1" size="100" />
</p>
</div>
</fieldset>
<p>
<input type="button" id="addURL" value="Add Another URL">
</p>
<input type="submit" value="Save">
</form>
</body>
</html>
答案 0 :(得分:2)
if($(this).valid()) {
$('#addURL').css('disabled', false);
}
else{
$('#addURL').css('disabled', true);
}
}
答案 1 :(得分:1)
选中 FIDDLE
为了根据验证禁用按钮:
$(document).on('focusout','input[id^="url"]', function() {
var isValid = $("#demoForm").valid();
var inputVal = $(this).val();
if(inputVal != "" && isValid == false)
{
$("#addURL").attr("disabled", true);
}
else
{
$("#addURL").attr("disabled", false);
}
});
答案 2 :(得分:1)
以下是我对此的看法。
我,除其他事项外,修复了第二个newPerson上的非法ID。我也摆脱了当前的计数器,我计算了可见的div而不是
一个奇怪的发现是我可以输入一个无效的URL,看到添加另一个灰色,然后我可以添加另一个,弄乱PREVIOUS并得到一个情况,我可以添加另一个但我添加的其中一个不是有效的。
$(function () {
$("#addURL").click(function () {
var current = $("#mainField").children("div:visible").length;
var $prev = $("#mainField div:visible").find("input");
var isValid=$prev.eq(current-1).valid();
console.log($prev.attr("id"),isValid);
$("#addURL").prop("disabled",!isValid);
if (!isValid || current >= 5) {
$("#addURL").prop("disabled",true);
return false;
}
$newPerson = $("#userTemplate").clone(true);
$newPerson.attr("id","person"+current);
$newPerson.children("p").children("label").each(function (i) {
var $currentElem = $(this);
$currentElem.attr("for", $currentElem.attr("for") + current);
});
$newPerson.children("p").children("input").each(function (i) {
var $currentElem = $(this);
$currentElem.attr("name", $currentElem.attr("name") + current);
$currentElem.attr("id", $currentElem.attr("id") + current);
});
//Technically, you could update the attributes with one loop...
//
// $newPerson.children("p").children("label,input").each...
//
// ...but you end up assigning "NaN" names and ids to the labels and other such wackiness.
$newPerson.appendTo("#mainField");
$newPerson.removeClass("hideElement");
//add validation
$("#url0" + current).rules("add", {
required: true,
url: true
});
});
$("#demoForm").validate({
rules: {
url1: {
required: true,
url: true
}
},
success: function() {
$("#addURL").prop("disabled",false);
},
submitHandler: function (form) {
if ($("#demoform").valid()) {
alert("hello");
} else {
$('#addURL').prop('disabled', true);
}
}
});
});