var h=function(){
this.setCustomValidity('');
}
// убираем сообщение об ошибке при начале изменения в поле. Неплохо бы добавить обработку 'paste'
$('input, textarea', form_selector).change(h).on('keydown',h);
function setInvalid(invalid, form) {
// неплохо бы убрать сообщение об ошибке из предыдущей проверки
$('input, textarea', form).trigger(h);
// ставим первое сообщение в списке ошибок
for(var a in invalid){
var i=$('[name="'+a+'"]', form);
if(i.length>0) {
i[0].setCustomValidity(invalid[a]);
i[0].reportValidity();
return;
}
}
// не найдено поля с таким именем - выводим ошибку в специально обученное место
console.log('opps!', invalid);
}
...
success: function(data){
if(data.error){
setInvalid(data.error,form);
return ;
}
}
Ну и вставлять ненужный svg в код как-то не очень красиво. Вот такое правило
позволяет сделать примерно то же самое. Да и менять контуры для резки меню в медиа-секции станет удобнее.
Есть более другие способы рисования всяких круглоэлементов, с помощью linear-gradient и radial-gradient. Вот тут я творчески утащил отсюда же какой-то интересный мне пример. Если не обращать внимание на "круглость" перехода от активного элемента к нективному - все, примерно, такое как тут надо.