Условно установите атрибут полей ввода на обязательный, если с помощью jQuery установлен флажок - PullRequest
Новая
       46

Условно установите атрибут полей ввода на обязательный, если с помощью jQuery установлен флажок

2 голосов
/ 06 декабря 2010

Я использую плагин валидатора jquery Tools и у меня есть форма с несколькими разделами. Вверху каждого раздела есть флажок, который я хочу сделать основным переключателем для каждого раздела - чтобы программно включать / отключать функциональность (например, проверку) для текстовых полей и полей электронной почты в каждом разделе.

По сути, я хотел условно установить для атрибута полей ввода типа «текст» и / или «адрес электронной почты» значение «требуется», если установлен соответствующий флажок группы. По общему признанию, я не так хорош с jQuery.

Каждый раздел формы похож на ниже, но может иметь различное количество текстовых полей и / или полей электронной почты: 

<input type="checkbox" group-name="mail" name="mail" id="mail_enable"
       checked="<?= (chkConfig("mail_enable", 0) ? "yes" :  "no"); ?>"
       onChange="chkRequired('mail');"   
       title='check this box to send the specified reports to your email.' > 
       <label for="mail_enable">notify me when the batch is complete.</label></div>
  <div class="left"><label for="lblemailid">Email Address: </label></div>
  <div class="right"><input type="email" group-name="mail" name="mailto" 
       id="emailAddress" size="30" maxlength="50" />

Я создал атрибут с именем group-name, и все поля в разделе имеют одно и то же имя группы. и с помощью г-на Фредерика Хамиди (в нашем обсуждении ниже) мы изменили мою функцию. вот последняя версия: 

  function chkRequired(group){ 
    var groupCheckBox = $("#" + group + "_enable");
    var groupSelector = "[group-name='" + groupCheckBox.attr("group-name") + "']";
    var fieldSelector = "input[type=text], input[type=email]";
     if  ( $(groupCheckBox).is(':checked'))  {
        $(groupSelector).add(fieldSelector).attr("required");
       } else { 
        $(groupSelector).add(fieldSelector).removeAttr("required");
     }
   }

Надеюсь, это поможет кому-то еще в подобной ситуации.

Я до сих пор не могу понять синтаксис селектора, чтобы присоединить его к doc.ready () amd .change () глобально. но это работает, если вы присваиваете функцию событию onChange для полей вручную.

Кроме того, если кто-нибудь может помочь мне с синтаксисом validator.addMethod (), чтобы мы могли просто создать собственный метод проверки - это было бы полезно.

Особая благодарность мистеру Фредерику Хамиди за помощь в разработке логики.

Я создал более подробное руководство, если кому-то интересно @ http://www.logicwizards.net/2010/12/07/jquery-tools-custom-validator-mod/

Джо Негрон: Волшебники-логики ~ Нью-Йорк

1 Ответ

3 голосов
/ 06 декабря 2010

Ну, $('#'+groupName).val() возвращает undefined, потому что ваш флажок соответствует #mail_enable, а не #mail.Вам даже не нужно вычислять его во второй раз, так как вы использовали его ранее, чтобы получить имя группы.

Кроме того, val () возвращает значение флажка, а не его состояние проверки.Для этого вам понадобится атрибут проверено (или селектор : проверено ): 

function chkRequired(group)
{
    var groupCheckBox = $("#" + group + "_enable");
    var groupSelector = "[group-name='" + groupCheckBox.attr("group-name") + "']";
    if (groupCheckBox.is(":checked")) {
        $("input:text" + groupSelector).attr("required", "required");
        $("input[type='mail']" + groupSelector).attr("required", "required");
    } else { 
        $("input:text" + groupSelector).removeAttr("required");
        $("input[type='mail']" + groupSelector).removeAttr("required");
    }
}
...