Javascript Form Validation Problem

Question

i'm trying to put together some Javascript form validation to check that all fields have been completed before submitting.

So far i have this in my tag, and the function for the first form field only:

<script type="text/javascript">

function validate(form) {
fail = vaildatecompany_name(preview.company_name.value)

if (fail =="" return true

else { alert(fail); return false }
}

function validatecompany_name(field) {
    if (field == "" return "No Company Name was entered. \n"
return ""
}
</script>

And the first field i'm trying to validate is:

<form action="jobpreview.php" name = "preview" method="post" form enctype="multipart/form-data" onSubmit = "return validate(this)">

<ul>
<li><label for = "company_name">Company Name</label>    
<input type="text" name="company_name"/>
</li>

Can someone explain what i'm doing wrong? It's not bringing up any alert when i submit the form with no entry in the field and is just going through as normal.

Thanks Dan

Maybe useful

KooiInc
– KooiInc

2025-09-05 09:04:26 +00:00
Commented Sep 5 at 9:04 — KooiInc
– KooiInc, Commented Sep 5 at 9:04

Ben · Accepted Answer · 2011-07-07 16:26:11Z

1

Your code is riddled with errors. You spelled your call to the validatecompany_name function wrong, your if statements aren't properly formed (errant opening bracket) and you don't pass the form variable properly (you treat preview and form interchangeably). This works, although it's not great code:

function validate(form){
  var fail = validatecompany_name(form.company_name.value);
    if (fail==""){
      return true;
    } else {
      alert(fail);
      return false;
    }
  }

function validatecompany_name(field){
  if (field == "") return "No Company Name was entered. \n";
  return "";
}

answered Jul 7, 2011 at 16:26

Ben

7,59533 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ben Over a year ago

BTW you don't need the \n bit in your return from validatecompany_name, it doesn't achieve anything.

Dan Over a year ago

thanks Ben, this is actually copied from an O'Reilly book (but the typos on my behalf are terrible). Thanks for your time, this is working now. Thanks, Dan

mplungjan Over a year ago

can we at least do return (field === "")?"No Company Name was entered":"";

Dan Over a year ago

@Ben Poole Hi Ben, I spoke too soon, sort of. If i go on to add the same validation for the other fields in my form, it only seems to check the last one?

Ben Over a year ago

@Dan well you're using the same fail flag for everything I guess, so it's only as good as your last test. Like I say, this isn't great code, I'd be inclined to use something like the jquery.validate plugin myself -- a lot more powerful, and once you've got the hang of it, you'll use it again and again.

|

Joe · Accepted Answer · 2011-07-07 16:19:17Z

1

You need closing parentheses on your if statements if (BOOLEAN)

answered Jul 7, 2011 at 16:19

Joe

82.9k18 gold badges130 silver badges147 bronze badges

1 Comment

Dan Over a year ago

Well that's a little embarrassing! OK, i've put the closing parentheses in but it's still not recognising the empty field on submit. Any ideas?

Dinash · Accepted Answer · 2011-07-07 17:13:02Z

0

wat is this statement do proper closings... if (field == "" return "No Company Name was entered. \n" it should be like if (field == "") return "No Company Name was entered. \n"

and you cannot directly access form by name.. use document.formname or use the form object that you passed...

edited Jul 7, 2011 at 17:13

answered Jul 7, 2011 at 16:19

Dinash

3,0474 gold badges34 silver badges46 bronze badges

1 Comment

Dinash Over a year ago

check the value of preview.company_name.value in alert... and comment all other codes... also try ` if (field.trim() == "") `

mplungjan · Accepted Answer · 2025-09-05 09:02:29Z

Fixing your script since you had a few typos (validatecompany_name misspelled, assignment instead of comparison, missing )/}), which stopped your alerts from firing. Here is a a minimal working version just fixes those mistakes:

function validateCompanyName(field) {
  return field === '' ? 'No Company Name was entered.\n' : '';
}

function validate(form) {
  const fail = validateCompanyName(form.company_name.value);
  if (!fail) return true;
  alert(fail);
  return false;
}

<form action="jobpreview.php" method="post" enctype="multipart/form-data" onsubmit="return validate(this)">
  <ul>
    <li>
      <label for="company_name">Company Name</label>
      <input type="text" name="company_name" id="company_name">
    </li>
    <li>
      <button type="submit">Submit</button>
    </li>
  </ul>
</form>

Improving your script

remove all script and add required
<input type="text" name="company_name" id="company_name" required> OR
Use recommended event listeners

window.addEventListener('load', () => {
  document.getElementById('jobForm').addEventListener('submit', e => {
    const companyName = e.target.company_name;
    if (companyName.value.trim() ==="") {
      alert('No Company Name was entered.');
      companyName.focus();
      e.preventDefault();
    }
  });
});

<form action="jobpreview.php" id="jobForm" method="post" enctype="multipart/form-data">
  <ul>
    <li>
      <label for="company_name">Company Name</label>
      <input type="text" name="company_name" id="company_name">
    </li>
    <li>
      <button type="submit">Submit</button>
    </li>
  </ul>
</form>

@DAN You are welcome. My suggestion is far easier for you to maintain. It will show one error at a time and focus the field in error

Collectives™ on Stack Overflow

Javascript Form Validation Problem

4 Answers 4

7 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related