Если выбрана опция, добавьте/удалите несколько атрибутов из нескольких полей с помощью jQuery?

Question

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

Я пытаюсь проверить этот раздел формы, который не скрыт, когда выбрано «Да», и поэтому требуется, чтобы атрибуты полей этого раздела добавлялись или удалялись (в зависимости от того, какой из способов работает лучше) в зависимости от выбора опции , Это потому, что форма может быть отправлена ​​без скрытого раздела, но если этот раздел не скрыт, я хочу проверить поля.

Моего поле выбора:

<select name="Joint" class="input-select" onChange="javascript:fieldsApp2(this);"> 
     <option value="No" selected="selected" >No</option> 
     <option value="Yes">Yes</option> 
    </select> 

Пример полей без проверки приписан (если «Нет» выбрано):

<label class='fieldlabel'>First name:</label> 
<div class='field'> 
<input type="text" name="Forename" class="input-text"> 
</div> 

<label class='fieldlabel'>Last name:</label>  
<div class='field'> 
<input type="text" name="Surname" class="input-text"> 
</div> 

того же поле, но с атрибутами валидации требуется, когда «Да 'выбрано:

<label class='fieldlabel'>First name:</label> 
<div class='field'> 
<input type="text" name="Forename" class="input-text" data-required="true" data-error-message="Valid First Name recquired.> 
</div> 

<label class='fieldlabel'>Last name:</label>  
<div class='field'> 
<input type="text" name="Surname" class="input-text" data-required="true" data-error-message="Valid Last Name recquired.> 
</div> 

Поэтому, я думаю, я ищу способ использования jQuery для swi tch между этими двумя! К сожалению, я действительно не jQuery. Любая помощь действительно ценится, приветствия!

Answer 1

$(function() { 
    $('[name="Joint"]').on('change', function() { 
     var state  = this.value == 'Yes', 
      data_obj1 = {'data-required'  : (state ? 'true':''), 
         'data-error-message' : (state ? 'Valid First Name required.' : '') }, 
      data_obj2 = {'data-required'  : (state ? 'true':''), 
         'data-error-message' : (state ? 'Valid Last Name required.' : '') }; 

     $('[name="Forename"]').attr(data_obj1); 
     $('[name="Surname"]').attr(data_obj2); 
    }); 
}); 

FIDDLE

Это должно переключать атрибуты данных на основе значения выбирает.

Использование data(), как правило, путь, но это действительно не изменяет значение атрибута, поэтому не уверен, что это сработает или нет?

Answer 2

Что-то вроде этого должно работать, хотя я не проверял его.

//Fires each time the dropdown is changed 
$(".input-select[name='Joint']").change(function() { 
    if (this.value == "Yes") { 
     $(".input-text").attr({ 
      data-required: true, 
      data-error-message: "Valid name required." //You may have to set both fields individually if you want 2 different messages. 
     }); 
    } 
    else { 
     $(".input-text").removeAttr("data-required data-error-message"); 
    } 

}); 

Answer 3

Если ваша проблема была о получении необходимых параметров, вы можете выбрать элементы по атрибутам данных, как это:

$("input[data-required='true']") 

Таким образом, вы можете получить список элементов, которые нуждаются в валидации. jQuery data() method поможет вам динамически добавлять эти атрибуты.