Проверять поля только с обязательным атрибутом также с помощью javascript?

Question

Я использую обязательный атрибут на входах по всему моему веб-сайту, чтобы доставлять данные в форме подтверждения. Я также делаю проверку на заднем плане.

Кажется, что Safari и IE не полностью поддерживает «необходимый» атрибут ..

Так я думал писать быстро, универсальную функцию JQuery, чтобы сделать некоторые проверки, когда браузер не поддерживает его, somethink например:

$('form').on('submit',function(){ 

    $(this).children().each(function(){ 

     if ($(this).prop('required') && $(this).val() === ""){ 
      alert('field has no value'); 
      return false; 
     } 
    }); 

}); 

Я просто набрал код примера, поэтому могут быть некоторые ошибки.

Кроме того, действительно ли рекомендуется, чтобы я также выполнял проверку javascript/jquery в интерфейсных полях? Или, может быть, только «обязательный» атрибут позаботится об этом.

Answer 1

В HTML5 требуемый тег будет проверять поля в браузере без требования какого-либо кода Javascript, jQuery или PHP.

Вы можете найти список способов он проверяет зависит от типа здесь: MDN

Когда дело доходит до запасного варианта, используя некоторую функциональность JQuery бы хорошо, но должны быть вызвано только в браузерах, которые требуют это, в противном случае вы можете вызвать конфликты с браузерами, которые это разрешают.

Использование HTML, если теги, чтобы определить, следует ли включать файл, было бы лучше.

<!--[if IE]> 
According to the conditional comment this is IE<br /> 
<![endif]--> 

Чтобы выполнить проверку, вам необходимо сделать проверку на форме представления, предотвратить функциональные возможности по умолчанию, а затем сделать находку против элементов, которые вам нужны.

Что-то вдоль этих линий:

$('form').submit(function(e) { 
 
    e.preventDefault(); 
 
    $(':input[required]:visible').each(function() { 
 
    if ($(this).val() == '') { 
 
     $('span.form_error').text('A required field was not filled out'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" name="small_text" required /> 
 
    <input type="submit" value="submit" /> 
 
    <span class="form_error"></span> 
 
</form>

Надежда все это имеет смысл для вас.

Answer 2

С учетом этого атрибута isn't fully supported across all browsers, и вы сказали, что с радостью используете JQuery для вашей проверки, я бы предложил использовать jquery validator plugin, который будет проверять вашу форму на основе либо атрибутов, либо имен классов ваших полей ввода.

<form> 
<label for='name'>Name</label> 
<input id='name' class='required'> 
<input type='submit' value='Submit'> 
</form> 

<script> 
$('document').ready(function() { 
    $('form').validate(); 
}) 
</script> 

 
 
$('document').ready(function() { 
 
    $('form').validate(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script> 
 

 
<form> 
 
    <label for='name'>Name</label> 
 
    <input id='name' class='required'> 
 
    <input type='submit' value='validate'> 
 
</form>