Минимизировать функцию на jquery?

Question

[Statium]

Имеется функция на jquery, подсвечивающая поля ввода если они пустые, но функция сдается мне некрасивая в реализации. Необходимо повторять одно и то же действие (подсвечивать поле и изменять бордер) для нескольких похожих элементов

function checkParams() {
if($('#sitename').val().length != 0) {
$('#sitename').removeAttr('style');
} else {
$('#sitename').attr('style', 'border-color:#dc4747; background:#feecec');
}
if($('#desc').val().length != 0) {
$('#desc').removeAttr('style');
} else {
$('#desc').attr('style', 'border-color:#dc4747; background:#feecec');
}
if($('#metadesc').val().length != 0) {
$('#metadesc').removeAttr('style');
} else {
$('#metadesc').attr('style', 'border-color:#dc4747; background:#feecec');
}
if($('#metawords').val().length != 0) {
$('#metawords').removeAttr('style');
} else {
$('#metawords').attr('style', 'border-color:#dc4747; background:#feecec');
}
if($('#copyrights').val().length != 0) {
$('#copyrights').removeAttr('style');
} else {
$('#copyrights').attr('style', 'border-color:#dc4747; background:#feecec');
}

if($('#notesview').val().length != 0) {
$('#notesview').removeAttr('style');
} else {
$('#notesview').attr('style', 'border-color:#dc4747; background:#feecec');
}
if($('#commentsview').val().length != 0) {
$('#commentsview').removeAttr('style');
} else {
$('#commentsview').attr('style', 'border-color:#dc4747; background:#feecec');
}
if($('#commentssize').val().length != 0) {
$('#commentssize').removeAttr('style');
} else {
$('#commentssize').attr('style', 'border-color:#dc4747; background:#feecec');
}

if($('#nickname').val().length != 0) {
$('#nickname').removeAttr('style');
} else {
$('#nickname').attr('style', 'border-color:#dc4747; background:#feecec');
}
}

Ниже приведено куча полей для которых нужна проверка, например

<div class="settingname"><b>Копирайты</b> (копирайты находятся в подвале сайта)</div>
<input id="copyrights" maxlength="50" placeholder="Копирайты" onkeyup="checkParams()" type="text" class="field" name="copy" value="<? echo htmlspecialchars($ini->read('main','copyrights')); ?>" />

Помогите минимизировать функцию, заранее спасибо)

Answer 1

[Stalker_RED]

function pew(selector) {
  if($(selector).val().length != 0) {
    $(selector).removeAttr('style');
  } else {
    $(selector).css(styles = {
      borderColor : "#dc4747",
      background: "#feecec"
    });
  }
}

['#sitename', '#desc', '#metadesc'] // и все остальные сюда
  .forEach(selector=>pew(selector))

А может быть вам подойдет что-то такое:

$('#myForm :input').on('change', function(){
  $this = $(this)
  if($this.val().length != 0) {
    $this.removeAttr('style');
  } else {
    $this.css(styles = {
      borderColor : "#dc4747",
      background: "#feecec"
    });
  }
})

Comments

[Statium]

['sitename', 'desc', 'metadesc'] // и все остальные сюда
.forEach(selector=>pew(selector))

не совсем понял)

сделал это в input
onkeyup="checkParams('#nickname')"

[Statium]

Мне там не все поля нужно проверять, вот в чем проблема

[Stalker_RED]

Statium, тогда можно перечислить их в массиве, или написать большой селектор типа

$('#sitename, #desc, #metadesc ...').on('change', ...)

[Statium]

Stalker_RED, не получается так

Answer 2

[eternalfire]

зачем изобретать велосипеды, если всё уже изобретено? если вам нужна верификация полей добавляйте атрибут required в тег input дальше браузер сделает всё за вас

если нужна какая то другая - есть замечательный jquery.validation и inputmask

в большинстве случаев клиентской проверки будет достаточно

Comments

[Statium]

браузер делает это некрасиво, в разных браузерах это выглядит по разному.

[eternalfire]

Statium, я же дописал jquery validation может делать всё что угодно

[Одиночка Айс]

eternalfire, не забудьте добавить валидацию на стороне сервера