jquery - how to enable add button after validation of text box? -
i creating text box dynamically using "add url". put url counter 5 urls only.
in validating url using jquery submit final urls.
but how disable "add url" button if first url not correct. can not create second or third text box.
if url correct button enabled.
code follows
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 valid url</label> <em>* </em><input id="url0" name="url0" size="100" /> </p> </div> <div> <p> <label for="url1">enter valid url</label> <em>* </em><input id="url1" name="url1" size="100" /> </p> </div> </fieldset> <p> <input type="button" id="addurl" value="add url"> </p> <input type="submit" value="save"> </form> </body> </html>
here take on this.
i, among other things fixed illegal id on second newperson , on. got rid of current counter, count visible divs instead
one strange finding can enter invalid url, see add grey out, can add another, mess previous , situation can add 1 of ones added not valid.
$(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, update attributes 1 loop... // // $newperson.children("p").children("label,input").each... // // ...but end assigning "nan" names , ids labels , 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); } } }); });
Comments
Post a Comment