How can I ensure that my function is being called and running

Question

I am creating a form validation here. I want to ask how does form validation works. The script i have here does not seem to return anything as the error given on the JS console is that the ValidateForm() function is undefined.

HTML:

    <form name="myForm" action="ControllerServlet" onsubmit="return validateForm()" method="post">
  <tr>
    <td class="newusertd">Name:<span class="price">*</span></td>
    <td class="newusertd">
      <input style="color: black;" type="text" name="name" class="Btn">
    </td>
  </tr>
  <tr>
    <td class="newusertd">Contact Number:<span class="price">*</span></td>
    <td class="newusertd">
      <input style="color: black;" type="text" name="phone" placeholder="98989898" class="Btn">
    </td>
  </tr>
  <tr>
    <td class="newusertd">Email:<span class="price">*<br></span></td>
    <td class="newusertd">
      <input style="color: black;" type="text" name="email" placeholder="xxx@hello.com" class="Btn">
    </td>
  </tr>
  <tr>
    <td class="newusertd">Address:<span class="price">*</span></td>
    <td class="newusertd">
      <input style="color: black;" type="text" name="address" class="Btn">
    </td>
  </tr>
  <tr>
    <td class="newusertd">Password:<span class="price">*</span>
      <br>(8-16 Characters with
      <br>one UPPERCASE & numbers)</td>
    <td class="newusertd">
      <input style="color: black;" type="password" name="password" class="Btn">
  </tr>
  <tr>
    <td class="newusertd"></td>
    <td class="newusertd">
      <input style="color: black;" type="submit" value="Create Account" class="Btn" />
    </td>
  </tr>
</form>

JS:

 function validateForm() {
  var name = document.forms["myForm"]["name"].value;
  var phone = document.forms["myForm"]["phone"].value;
  var email = document.forms["myForm"]["email"].value;
  var add = document.forms["myForm"]["address"].value;
  var passwd = document.forms["myForm"]["password"].value;
  var matchesCount = email.split("@").length - 1;
  var matchesCount2 = email.split(".").length - 1;
  var error = "";
  if (!name || !phone || !email || !add || !passwd) {
    error += "All must be filled out \n"

    if (phone.search(/^[0-9]*$/) == -1 || phone.length != 8) {
      error += "- Phone number can only contain digits \n";
    }

    if (passwd.search(/^[0-9a-zA-Z]*$/) == -1) {
      error += "- Password needs to be alphanumeric \n";
    }

    if (passwd.length < 8 || passwd.length > 16) {
      error += "- Password contain only 8-16 digits \n";
    }

    if (matchesCount > 1 || matchesCount2 < 1) {
      error += "- Please enter a valid email \n";
    }
    alert(error);
    return false;
  }
}

https://jsfiddle.net/KodeError404/wpwv614c/

Please inform me if you cannot see the JSFiddle.

In the script I am checking if all fields are filled and if its not filled, it should return false. I would appreciate if this is kept strictly to JS and not JQuery.

EDIT: This issue is that the password does not seem to check if i key in anything or if its alphanumeric with Uppercase. I want to know why does all fields get checked but not my password field

JSFiddle defaults to putting any code you enter for javascript into an onload event. Try changing the settings to put in the `` — Patrick Evans, Jul 09 '16 at 13:36
I thnink you should not check against null because value will be at least an empty sting ""... so .trim your value and check against == "" — Cracker0dks, Jul 09 '16 at 13:38
@PatrickEvans May I know where? I just started using JSFiddle so I am not sure even after clicking on the Settings tab on the right — Kode.Error404, Jul 09 '16 at 13:40
Click the "Javascript" label in the javascript window you will get a drop down, change "Load Type" — Patrick Evans, Jul 09 '16 at 13:41
Duplicate of http://stackoverflow.com/questions/7043649/why-does-this-simple-jsfiddle-not-work, however this doesn’t seem to be the only thing wrong with the fiddle… — Sebastian Simon, Jul 09 '16 at 13:44
@PatrickEvans Hi, could you check out this and tell me where did i go wrong? https://jsfiddle.net/KodeError404/0w4po318/ — Kode.Error404, Jul 09 '16 at 13:45
@RuslanBes Hi, I have figured that but now i would like to clarify the mistakes i have in my script. do see my fiddle jsfiddle.net/KodeError404/0w4po318 — Kode.Error404, Jul 09 '16 at 13:55

score 0 · Accepted Answer · answered Jul 09 '16 at 15:14

I realised i could break up the regex for the password to check the conditions individually.

function validateForm() {
  var name = document.forms["myForm"]["name"].value;
  var phone = document.forms["myForm"]["phone"].value;
  var email = document.forms["myForm"]["email"].value;
  var add = document.forms["myForm"]["address"].value;
  var passwd = document.forms["myForm"]["password"].value;
  var matchesCount = email.split("@").length - 1;
  var matchesCount2 = email.split(".").length - 1;
  var error = "";
  if (name == '' || phone == '' || email == '' || add == '' || passwd == '') {
    error += "All must be filled out \n"
  } else {
    if (phone.search(/^[0-9]*$/) == -1 || phone.length != 8) {
      error += "- Phone number can only contain digits \n";
    }
    if (passwd.search(/[A-Z]/) == -1) {
      error += "- Password needs to be have one UPPERCASE\n";
    }

    if (passwd.search(/[a-z]/) == -1) {
      error += "- Password needs to be have letters\n";
    }

    if (passwd.search(/[0-9]/) == -1) {
      error += "- Password needs to be have numbers\n";
    }

    if (passwd.length < 8 || passwd.length > 16) {
      error += "- Password contain only 8-16 digits \n";
    }

    if (matchesCount > 1 || matchesCount2 < 1) {
      error += "- Please enter a valid email \n";
    }
  }
  alert(error);
  return false;
}

<form name="myForm" action="ControllerServlet" onsubmit="return validateForm()" method="post">
  <table>

    <tr>
      <td class="newusertd">Name:<span class="price">*</span>
      </td>
      <td class="newusertd">
        <input style="color: black;" type="text" name="name" class="Btn">
      </td>
    </tr>
    <tr>
      <td class="newusertd">Contact Number:<span class="price">*</span>
      </td>
      <td class="newusertd">
        <input style="color: black;" type="text" name="phone" placeholder="98989898" class="Btn">
      </td>
    </tr>
    <tr>
      <td class="newusertd">Email:<span class="price">*<br></span>
      </td>
      <td class="newusertd">
        <input style="color: black;" type="text" name="email" placeholder="xxx@hello.com" class="Btn">
      </td>
    </tr>
    <tr>
      <td class="newusertd">Address:<span class="price">*</span>
      </td>
      <td class="newusertd">
        <input style="color: black;" type="text" name="address" class="Btn">
      </td>
    </tr>
    <tr>
      <td class="newusertd">Password:<span class="price">*</span>
        <br>(8-16 Characters with
        <br>one UPPERCASE & numbers)</td>
      <td class="newusertd">
        <input style="color: black;" type="password" name="password" class="Btn">
    </tr>
    <tr>
      <td class="newusertd"></td>
      <td class="newusertd">
        <input style="color: black;" type="submit" value="Create Account" class="Btn" />
      </td>
    </tr>

  </table>
</form>

How can I ensure that my function is being called and running

1 Answers1