как включить кнопку добавления после проверки текстового поля?

0

Я создаю текстовое поле динамически, используя "Добавить другой URL". Я установил счетчик URL только для 5 URL-адресов.

В этом я проверяю URL-адрес с помощью jquery, а затем отправляю окончательные 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>
Теги:

3 ответа

1
Лучший ответ

Вот мой пример.

Я, между прочим, исправил ваш незаконный идентификатор во втором NewPerson и дальше. Я также избавился от текущего в качестве счетчика, вместо этого я считаю видимыми divs

Один странный вывод заключается в том, что я могу ввести неверный URL-адрес, см. Раздел "Добавить еще один серый цвет", затем я могу добавить еще один, беспорядок с 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);
            }
        }
    });
});
Поделиться
  • 0
    Уважаемый mplunghan !! В php как мы можем получить доступ к этим текстовым данным. что будет $ _POST [''] data?
  • 0
    Вместо предупреждения вам нужно сделать $.post("yourserverprocess.php",$("#demoform").serialize(),function(data){alert(data)})
2 
if($(this).valid()) {
    $('#addURL').css('disabled', false);
    }
    else{
        $('#addURL').css('disabled', true);
    }
}
Поделиться
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);
         }
    });
Поделиться
  • 0
    в «FIDDLE» ничего не записывая, если мы нажимаем на кнопку, то также создается новое текстовое поле. Первоначально это должно быть отключено, если URL неверен или не введен

Ещё вопросы

Сообщество Overcoder
Наверх
Меню