0

我正在使用“添加另一个 url”动态创建文本框。我只为 5 个 url 放置了 url 计数器。

在此我使用 jquery 验证 url，然后提交最终 url。

但是如果第一个 url 不正确，如何禁用“添加另一个 url”按钮。这样我就无法创建第二个或第三个文本框。

如果 url 正确，则启用按钮。

代码如下

JSFIDDLE

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>
4

3 回答 3

2 
if($(this).valid()) {
    $('#addURL').css('disabled', false);
    }
    else{
        $('#addURL').css('disabled', true);
    }
}
于 2013-10-07T08:44:21.637 回答
1

检查这个小提琴


为了禁用基于验证的按钮：

 $(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);
         }
    });
于 2013-10-07T08:45:12.573 回答
1

这是我对此的看法。

我，除其他外，将您的非法 ID 固定在第二个 newPerson 上。我也摆脱了当前作为计数器，而是计算可见的 div

一个奇怪的发现是我可以输入一个无效的 URL，看到 Add another 变灰，然后我可以添加另一个，弄乱 PREVIOUS 并得到一个我可以添加另一个但我添加的一个无效的情况。

Live Demo

$(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);
            }
        }
    });
});
于 2013-10-07T09:37:46.247 回答