Thulaz Thulaz - 2 months ago 5
HTML Question

How to generate alert when clicking Submit button, only when the html form is full using Javascript

I have this html form with many forms of elements. I need to generate the alert "Thank you for your time! Your details have been submitted!" once the submit button is clicked, only when the form is full. When the form is empty I do not want to see this message. So far I've been using onClick event. Can someone please help me on this (I'm trying to implement this using Javascript)

Here's the Javascript code and HTML body

<html>

<head>

<title>JS Validation for other types of form input fields</title>

<script type="text/javascript">

function submitClick( ) //function shows message after submitting information

{

alert("Thank you for your time! Your details have been submitted!");

}


function formValidation ( )

{

flag = true;

if (document.myForm.user_name.value == "" )

{

alert ( "Please fill in your Name!" );

flag = false;

}

// Validate letters only as Name
if (!/^[a-zA-Z]*$/g.test(document.myForm.user_name.value))

{

alert("Enter alphabetic characters as Name!");

flag = false;

}

// Validate emails
if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)* (\.\w{2,3})+$/.test(myForm.user_email.value)) //Regular expressions to validate email

{

alert("Enter Valid Email Address!");

flag = false;

}

// Validate Phone number

flag = true;

if (document.myForm.user_phone.value == "" )

{

alert ( "Please fill in your Phone Number!" );

flag = false;

}


if (!/^[0-9]*$/g.test(myForm.user_phone.value))

{

alert("Enter numeric values as Phone Number!");

flag = false;

}


if ((document.myForm.userGender[0].checked == false) && (document.myForm.userGender[1].checked == false ) )

{

alert ( "Please select your gender!" );

flag = false;

}

if (document.myForm.userAge.selectedIndex == 0 )

{

alert ( "Please select your Age from the drop-down list!" );

flag=false;

}

if (document.myForm.termsAndConditions.checked == false )

{

alert ( "Please check the Terms and Conditions box!" );

flag= false;

}

return flag;

}

</script>

</head>

<body bgcolor = "#FFFFFF">

<form name="myForm" method="post" onSubmit=" return formValidation( );">

<h1>Please fill out your details below:</h1>

<p>Name: <input type="text" name="user_name"></p>

<p>Email: <input type="text" name="user_email"></p>

<p>Phone: <input type="text" name="user_phone"></p>

<p>Gender: <input type="radio" name="userGender" value="Male">Male

&nbsp; <input type="radio" name="userGender" value="Female">Female</p>

<p>Age:

<select name="userAge">

<option value="">Please select your age:</option>

<option value="0-17 years">0-17 years</option>

<option value="18-29 years">18-29 years</option>

<option value="30-40 years">30-40 years</option>

<option value="40-64 years">40-64 years</option>

<option value="65+ years">65+ years</option>

</select>

<p>Please tick the checkbox if you agree with our Terms and Conditions:

<input type="checkbox" name="termsAndConditions" value="Yes"> Yes

<p><input type="submit" name="send" value="Submit Details" onClick="submitClick( )"></p>

</form>

</body>

</html>

Answer

You don't need the onclick event handler for the submit button. Just use the onsubmit event handler of the form like this:

  function submitClick() {
    if (formValidation()) {
      alert("Thank you for your time! Your details have been submitted!");
      return true;
    } else {
      return false;
    }
  }

  function formValidation() {
    flag = true;

    if (document.myForm.user_name.value == "") {
      alert("Please fill in your Name!");
      flag = false;
    }

    // Validate letters only as Name
    if (!/^[a-zA-Z]*$/g.test(document.myForm.user_name.value)) {
      alert("Enter alphabetic characters as Name!");
      flag = false;
    }

    // Validate emails
    if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)* (\.\w{2,3})+$/.test(myForm.user_email.value)) //Regular expressions to validate email
    {
      //alert("Enter Valid Email Address!");
      //flag = false;
    }

    // Validate Phone number
    if (document.myForm.user_phone.value == "") {
      alert("Please fill in your Phone Number!");
      flag = false;
    }

    if (!/^[0-9]*$/g.test(myForm.user_phone.value)) {
      alert("Enter numeric values as Phone Number!");
      flag = false;
    }

    if ((document.myForm.userGender[0].checked == false) && (document.myForm.userGender[1].checked == false)) {
      alert("Please select your gender!");
      flag = false;
    }

    if (document.myForm.userAge.selectedIndex == 0) {
      alert("Please select your Age from the drop-down list!");
      flag = false;
    }

    if (document.myForm.termsAndConditions.checked == false) {
      alert("Please check the Terms and Conditions box!");
      flag = false;
    }

    return flag;
  }
<html>
<head></head>

<body bgcolor="#FFFFFF">

  <form name="myForm" method="post" onsubmit="return submitClick();">

    <h1>Please fill out your details below:</h1>

    <p>Name:
      <input type="text" name="user_name">
    </p>

    <p>Email:
      <input type="text" name="user_email">
    </p>

    <p>Phone:
      <input type="text" name="user_phone">
    </p>

    <p>Gender:
      <input type="radio" name="userGender" value="Male">Male &nbsp;
      <input type="radio" name="userGender" value="Female">Female</p>

    <p>Age:

      <select name="userAge">

        <option value="">Please select your age:</option>

        <option value="0-17 years">0-17 years</option>

        <option value="18-29 years">18-29 years</option>

        <option value="30-40 years">30-40 years</option>

        <option value="40-64 years">40-64 years</option>

        <option value="65+ years">65+ years</option>

      </select>

      <p>Please tick the checkbox if you agree with our Terms and Conditions:

        <input type="checkbox" name="termsAndConditions" value="Yes"> Yes

        <p>
          <input type="submit" name="send" value="Submit Details">
        </p>

  </form>

</body>
</html>

notes:

  • I commented out the e-mail check as it does not seem to work.
  • Safe validation should be handled the other way around: You set flag to false and when everything is fine you set flag to true.
Comments