Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как сделать условную валидацию полей (https://javascript.ru/forum/dom-window/71569-kak-sdelat-uslovnuyu-validaciyu-polejj.html)

Anushki 29.11.2017 05:26

Как сделать условную валидацию полей
 
Всем привет ребят. Подскажите пожалуйста.

Есть форма:
<form>
<ul class="tab">
<li class="fiz" for="fiz">
<input type="radio" name="who" id="fiz" value="fiz"> Физическое лицо
</li>
<li class="iur" for="iur">
<input type="radio" name="who" id="iur" value="iur"> Юридическое лицо
</li>
</ul>
<fieldset id="fiz">
<input type="text" name="" placeholder="ФИО">
<input type="text" name="" placeholder="Адрес">
<input type="text" name="" placeholder="Должность">
</fieldset>
<fieldset id="iur">
<input type="text" name="" placeholder="ФИО">
<input type="text" name="" placeholder="Регистрационный номер">
<input type="text" name="" placeholder="Название организации">
</fieldset>
</form>


Как сделать условную валидацию? Чтобы например при выборе radio физ лица, поля с radio юр лица не были обязательными к заполнению? И наоборот...

Буду вам очень признательна..

laimas 29.11.2017 06:49

На jQuery можно так:

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
div[class|=group] {
    display: none;
}
</style>
<script type="text/javascript">
$(function() {
    var fields = $('fieldset');
    $('.tab input').change(function() {
        fields.eq(this.value).show().children().prop('required', 1);
        fields.eq(this.value ^ 1).hide().children().prop('required', 0); 
    });
});
</script>
</head>
<body>
<form>
    <ul class="tab">
    <li class="fiz">
        <input type="radio" name="who" value="0" checked=""> Физическое лицо
    </li>
    <li class="iur">
        <input type="radio" name="who" value="1"> Юридическое лицо
    </li>
    </ul>
    <fieldset>
        <input type="text" name="" required="" placeholder="ФИО">
        <input type="text" name="" required="" placeholder="Адрес">
        <input type="text" name="" required="" placeholder="Должность">
    </fieldset>
    <fieldset style="display: none;">
        <input type="text" name="" placeholder="ФИО">
        <input type="text" name="" placeholder="Регистрационный номер">
        <input type="text" name="" placeholder="Название организации">
    </fieldset>
</form>
</body>
</html>


LI не имеют атрибута for, это у label "для ...".

Anushki 29.11.2017 13:44

Цитата:

Сообщение от laimas (Сообщение 471500)
На jQuery можно так:

Спасибо большое laimas :) очень тебе благодарна. выручил


Часовой пояс GMT +3, время: 23:43.