Проверка атрибута входов, не работающих более чем на один

Question

Существует несколько блоков выбора и полей ввода. Я написал функцию, когда тело загружается. Моя функция проверяет значение поля выбора и отправляет шаблон на вход. Моя проблема заключается в том, что этот код повторит шаблон для всех полей, например. Если поле выбора «NS», оно будет повторять шаблон NS для всех входов. Вот мой сниппет:

$(function() { 
 
    var value= $('select[name=type]').val(); 
 
    var pattern = $('select[name=type] option:selected').data('pattern'); 
 

 
    $('input[name=hostInput]').attr('pattern', pattern); 
 
    $('input[name=hostInput]').val(value); 
 
});

.to_validate:invalid { 
 
    color: navy; 
 
    outline: none; 
 
    border-color: #ff1050; 
 
    box-shadow: 0 0 10px #ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
    <select name="type" class="minimal"> 
 
    <option value="Record" hidden>Record</option> 
 
    <option value="NS" selected data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option> 
 
    <option value="MX" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX </option> 
 
    </select> 
 
    
 
    <br/> 
 
    
 
    <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" title="Wrong host"/> 
 
    <br/> 
 
    
 
    <br/> 
 
    
 
    <select name="type" class="minimal"> 
 
    <option value="Record" hidden>Record</option> 
 
    <option value="NS" data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option> 
 
    <option value="MX" selected data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX </option> 
 
    </select> 
 
    
 
    <br/> 
 
    
 
    <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" title="Wrong host"/> 
 
    <br/> 
 

 
</form>

Answer 1

$.each() Пользователь на вашем input[name=hostInput] для петли на них всех.

Затем используйте $(this).prevAll('select[name=type]').val(), чтобы получить предыдущий объект

function run() { 
 

 

 
    $('input.to_validate').each(function() { 
 
    var value = $(this).prevAll('select[name=type]').val(); 
 
    var pattern = $(this).prev('select[name=type] option:selected').data('pattern'); 
 

 
    $(this).attr('pattern', pattern); 
 
    $(this).val(value); 
 
    }) 
 
} 
 

 
run() 
 

 
$('.minimal').change(function() { 
 
run(); 
 
})

.to_validate:invalid { 
 
    color: navy; 
 
    outline: none; 
 
    border-color: #ff1050; 
 
    box-shadow: 0 0 10px #ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
    <select name="type" class="minimal"> 
 
    <option value="Record" hidden>Record</option> 
 
    <option value="NS" selected data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option> 
 
    <option value="MX" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX </option> 
 
    </select> 
 

 
    <br/> 
 

 
    <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" title="Wrong host" /> 
 
    <br/> 
 

 
    <br/> 
 

 
    <select name="type" class="minimal"> 
 
    <option value="Record" hidden>Record</option> 
 
    <option value="NS" data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option> 
 
    <option value="MX" selected data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX </option> 
 
    </select> 
 

 
    <br/> 
 

 
    <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" title="Wrong host" /> 
 
    <br/> 
 

 
    <br/> 
 

 
    <select name="type" class="minimal"> 
 
    <option value="Record" hidden>Record</option> 
 
    <option value="NS" data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option> 
 
    <option value="MX" selected data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX </option> 
 
    
 
    <option value="TX" selected data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">TX </option> 
 
    </select> 
 

 
    <br/> 
 

 
    <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" title="Wrong host" /> 
 
    <br/> 
 

 
</form>

Answer 2

Если вы хотите, чтобы хотеть нажать выбранную опцию на соответствующие входы, то здесь вы идете

$(function() { 
 

 
$(".minimal").each(function(){ 
 
    var value= $(this).val(); 
 
    
 
    var pattern = $(this).find('option:selected').data('pattern'); 
 
\t 
 
    $(this).nextAll('input[name=hostInput]').eq(0).attr('pattern', pattern); 
 
    $(this).nextAll('input[name=hostInput]').eq(0).val(value); 
 
    
 
    }) 
 
});

.to_validate:invalid { 
 
    color: navy; 
 
    outline: none; 
 
    border-color: #ff1050; 
 
    box-shadow: 0 0 10px #ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <select name="type" class="minimal"> 
 
    <option value="Record" hidden>Record</option> 
 
    <option value="NS" selected data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option> 
 
    <option value="MX" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX </option> 
 
    </select> 
 
    
 
    <br/> 
 
    
 
    <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" title="Wrong host"/> 
 
    <br/> 
 
    
 
    <br/> 
 
    
 
    <select name="type" class="minimal"> 
 
    <option value="Record" hidden>Record</option> 
 
    <option value="NS" data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option> 
 
    <option value="MX" selected data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX </option> 
 
    </select> 
 
    
 
    
 
    
 
    <br/> 
 
    
 
    <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" title="Wrong host"/> 
 
    <br/><br/> 
 
    
 
    <select name="type" class="minimal"> 
 
    <option value="Record" hidden>Record</option> 
 
    <option value="NS" selected data-pattern="(?!\d+(?:\.\d+){3}$)(([a-zA-Z\d]|[a-zA-Z\d][a-zA-Z\d-]*[a-zA-Z\d])\.)*([A-Za-z\d]|[A-Za-z\d][A-Za-z\d-]*[A-Za-z\d])" data-placeholder="Hostname" data-title="Wrong host">NS</option> 
 
    <option value="MX" data-pattern="(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])" data-placeholder="IP address" data-title="Wrong Ip Placeholder">MX </option> 
 
    </select> 
 
    
 
    
 
    <br/> 
 
    
 
    <input type="text" name="hostInput" placeholder="Hostname" class="to_validate" title="Wrong host"/> 
 
    <br/> 
 

 
</form>