vendredi 23 mars 2018

A Simple Form with Validation in JavaScript

I would like to modify a JavaScript Code and add an extra field such as:

  • The first text box for the user to enter his/her address,
  • The second text box for the user to enter a telephone number.

The Code looks like so:

var myForm = document.form1;

function btnCheckFormClick(e) {
  var txtName = myForm.txtName;
  var txtAge = myForm.txtAge;
  if (txtAge.value == "" || txtName.value == "") {
    alert("Please complete all of the form");
    if (txtName.value == "") {
      txtName.focus();
    } else {
      txtAge.focus();
    }
  } else {
    alert("Thanks for completing the form " + txtName.value);
  }
}

function txtAgeBlur(e) {
  var target = e.target;
  if (isNaN(target.value)) {
    alert("Please enter a valid age");
    target.focus();
    target.select();
  }
}

function txtNameChange(e) {
  alert("Hi " + e.target.value);
}
myForm.txtName.addEventListener("change", txtNameChange);
myForm.txtAge.addEventListener("blur", txtAgeBlur);
myForm.btnCheckForm.addEventListener("click", btnCheckFormClick);
<form action="" name="form1">
  Please enter the following details:
  <p>
    Name:
    <input type="text" name="txtName" />
  </p>
  <p>
    Age:
    <input type="text" name="txtAge" size="3" maxlength="3" />
  </p>
  <p>
    <input type="button" value="Check details" name="btnCheckForm">
  </p>
</form>

Here is what I tried already BUt it's not working(Not Validation):

var myForm = document.form1;

function btnCheckFormClick(e) {
  var txtName = myForm.txtName;
  var txtAge = myForm.txtAge;
  var txtAddress = myForm.txtAddress;
  var txtTelNumber = myForm.txtTelNumber;
  if (txtAge.value == "" || txtName.value == "" && txtAddress.value == "" || txtTelNumber.value == "") {
    alert("Please complete all of the form");
    if (txtName.value == "" && txtAddress.value == "" && txtTelNumber.value == "") {
      txtName.focus();
    } else {
      txtAge.focus();
    } else {
      txtAddress.focus();
    } else {
      txtTelNumber.focus();
    } else {
      alert("Thanks for completing the form " + txtName.value);
    }
  }
}

function txtAgeBlur(e) {
  var target = e.target;
  if (isNaN(target.value)) {
    alert("Please enter a valid age");
    target.focus();
    target.select();
  }
}

function txtTelNumberBlur(e) {
  var target = e.target;
  if (isNaN(target.value)) {
    alert("Please enter a valid number");
    target.focus();
    target.select();
  }
}

function txtAddressChange(e) {
  alert("Your address is: " + e.target.value);
}

function txtNameChange(e) {
  alert("Hi " + e.target.value);
}
myForm.txtName.addEventListener("change", txtNameChange);
myForm.txtAge.addEventListener(, txtAgeBlur);
myForm.txtAddress.addEventListener("change", txtAddressChange);
myForm.txtTelNumber.addEventListener("change", txtTelNumberBlur);
myForm.btnCheckForm.addEventListener("click", btnCheckFormClick);
<form action="" name="form1">
  Please enter the following details:
  <p>
    Name:
    <input type="text" name="txtName" />
  </p>
  <p>
    Age:
    <input type="text" name="txtAge" size="3" maxlength="3" />
  </p>
  Address:
  <input type="text" name="txtAddress" size="40" maxlength="25" />
  </p>
  Telephone Number:
  <input type="text" name="txtTelNumber" size="20" maxlength="10" />
  </p>
  <p>
    <input type="button" value="Check details" name="btnCheckForm">
  </p>
</form>

Can anyone tell me what am I doing wrong and point me out to where look at?

Thanks.

Aucun commentaire:

Enregistrer un commentaire