jQuery form field validation

Question

I have the code below on my form fields to validate it's not empty. If empty, a CSS error class is added.

if(!$('.order-modal input[name="address"]').val()){
 $('.order-modal input[name="address"]').addClass('ww-error');
  form_errors += 1;
}else{
 $('.order-modal input[name="address"]').removeClass('ww-error');
}

I also want to check if the same form field contains "P.O. box" or "PO box" or p.o. box or po box and if it does change placeholder text and the error class.

The code below works in a way but not perfectly as I want it?

if(!$('.order-modal input[name="address"]').val()){
  $('.order-modal input[name="address"]').addClass('ww-error');
    form_errors += 1;
}else if($('.order-modal input[name="address"]').val() == 'P.O. box'){
  $('.order-modal input[name="address"]').val('');
  $('.order-modal input[name="address"]').attr('placeholder', 'P.O. box not accepted');
  $('.order-modal input[name="address"]').addClass('ww-error');
    form_errors += 1;
}else{
  $('.order-modal input[name="address"]').removeClass('ww-error');
}

Thanks! /Robert

Also, it seems correct to me. Have you *tried* it? Do you get any error messages? What happens when you run the code? — Obsidian Age, Dec 16 '18 at 22:06
https://stackoverflow.com/questions/3480771/how-do-i-check-if-string-contains-substring possible duplicate — Ionut Tatu, Dec 16 '18 at 22:08
Use val method to get the value. NB Placeholder text won't be visible when the control has a value. — AlbertVanHalen, Dec 16 '18 at 22:13
Yes AlbertVanHalen it works but the placeholder is not visible. The CSS class is applied. How to change the placeholder also? — Robibob, Dec 19 '18 at 17:48

score 0 · Answer 1 · answered Dec 17 '18 at 00:02

0

there is no inbuilt hasValue function, instead of

$('.x').hasValue('Y')

use

$('.x').val() == 'Y'

answered Dec 17 '18 at 00:02

john Smith

17,409
11
76
117

Not like this? $('.x').val('Y') – Robibob Dec 17 '18 at 08:39
this way you set the value you want to compare it and check if its the same – john Smith Dec 17 '18 at 08:55

mplungjan · Answer 2 · 2019-01-01T13:23:55.837

0

Complete code:

var $fld = $('.order-modal input[name="address"]'), 
    val = $fld.val(), 
    fldError=false;
if ($.trim(val)==="") { // or add required attribute
  alert("Field is mandatory");
  fldError = true;
}
else {
  var po = val.indexOf('P.O. box') !=-1;
  if (po) {
    $fld.val('').attr('placeholder','POBox not allowed');
    fldError = true;
  }
}
$fld.toggleClass('ww-error',fldError);
if (fldError) form_errors += 1;

edited Jan 01 '19 at 13:23

answered Dec 17 '18 at 18:03

mplungjan

169,008
28
173
236

Typo. Remove the `(` from `$fld(.val` – mplungjan Dec 31 '18 at 05:30
I also changed the last line to use $fld – mplungjan Dec 31 '18 at 05:33
Yes it worked with no console error but the original check for a empty field is gone. And it would be good to set back the original placeholder text if no error. Thanks! – Robibob Jan 01 '19 at 11:04
Updated to include a test for blank – mplungjan Jan 01 '19 at 13:26

jQuery form field validation

2 Answers2