Как выделить валидацию jQuery

Question

Мне бы очень помогли, так как я новичок, когда дело доходит до jQuery.

У меня есть этот код прямо здесь:

$(document).ready(function(){ 
     $("#subscribe").validate({ 
      debug: false, 
      rules: { 
       email: { 
        required: true, 
        email: true 
       } 
      }, 
      messages: { 
       email: "*", 
      }, 
      submitHandler: function(form) { 
       $.post('wp-content/themes/abc/process.php', $("#subscribe").serialize(), function(data) { 
        $('#results').html(data); 
       }); 
      } 
     }); 
}); 

Теперь, что им пытаются сделать, это заменить сообщение: * с подсветкой поля ввода. Поэтому вместо того, чтобы показывать сообщение * сразу после поля ввода электронной почты, я хотел бы добавить класс в поле ввода электронной почты. Помощь будет высоко оценена.

Answer 1

Как указано в victor k и Cory, jQuery validate добавляет класс .error к проверяемому элементу, если он не прошел правила проверки. Он также добавляет сообщение по умолчанию. Если вы хотите удалить сообщение и выделить поле ввода, вы можете установить сообщение в пустую строку и выделить поле ввода с помощью CSS. Вот пример:

$(document).ready(function() { 
 
    $("#subscribe").validate({ 
 
    debug: false, 
 
    rules: { 
 
     email: { 
 
     required: true, 
 
     email: true 
 
     } 
 
    }, 
 
    messages: { 
 
     email: "", 
 
    }, 
 
    submitHandler: function(form) { 
 
     $.post('wp-content/themes/abc/process.php', $("#subscribe").serialize(), function(data) { 
 
     $('#results').html(data); 
 
     }); 
 
    } 
 
    }); 
 
});

#email.error { 
 
    border: 2px solid red; 
 
    background-color: yellow; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script> 
 

 
<form id="subscribe"> 
 
    <input type="text" id="email" name="email"> 
 
</form>