Ways to troubleshoot Contact Form not progressing to the following validation step

The validation for the first two inputs, title and name, is functioning correctly. However, there is an issue with the page refreshing every time validation occurs.

After validating the name field, the email field, as well as other fields such as dropbox, checkbox, and message, are not being validated.

CODE

function checkData() {


  if (document.signup.TITLE.value == "") {
    alert("Please select your Title.")
    document.signup.TITLE.focus()
    return false;

  }

  if (document.signup.NAME.value == "" || document.signup.NAME.value.length < 2 || isNaN.document.signup.NAME.value) {
    alert("Please fill in your Name.")
    document.signup.NAME.focus()
    return false;

  }




  if (document.signup.EMAIL.value == "") {
    alert("Please fill in your E-Mail address.")
    document.signup.EMAIL.focus()
    return false;

  }

  if (document.signup.ENQ.value == "") {
    alert("Please select your Enquiry.")
    document.signup.ENQ.focus()
    return false;

  }

  if (document.signup.INS.value == "") {
    alert("Please select your Insurance.")
    document.signup.INS.focus()
    return false;

  }
  if (document.signup.MSG.value == "") {
    alert("Please type in your Message.")
    document.signup.MSG.focus()
    return false;

  } else {

    return true;
  }



}
<form name="signup" onsubmit="return checkData()">

  <td>
    Title:*
  </td>

  <td>
    <input type="radio" name="TITLE" value="TITLE">Mr
    <input type="radio" name="TITLE" value="TITLE">Mrs
    <input type="radio" name="TITLE" value="TITLE">Miss
    <input type="radio" name="TITLE" value="TITLE">Ms
  </td>

  <tr>

    <td>Your Name: </td>

    <td>
      <input name="NAME" type="text" id="NAME" />

    </td>

  </tr>

  <tr>
    <td>E-Mail:</td>
    <td>
      <input name="EMAIL" type="text" id="EMAIL" />
    </td>
  </tr>
  <!-------->
  <tr>
    <td>
      Enquiry:*
    </td>
    <td>

      <select>
        <option name="ENQ" value="S">Select Option</option>
        <option name="ENQ" value="sg">Suggestion</option>
        <option name="ENQ" value="sg">Complaint</option>
        <option name="ENQ" value="sg">Cancellation</option>
      </select>


      </div>
      </div>
    </td>
  </tr>

  <!-------->
  <tr>
    <td>
      Select Insurance
    </td>

    <td>
      <div id="checkboxes">
        <input type="checkbox" name="INS" id="INS" value="INS" />Insurance
        <label for="one"><input type="checkbox" name="INS" id="INS"/>Fees</label>
        <label for="one"><input type="checkbox" name="INS" id="INS"/>Black Box</label>
      </div>
    </td>
  </tr>

  <tr>
    <td>
      Message:
    </td>

    <td>
      <textarea name="MSG" rows="5" cols="80" id "MSG"></textarea>

    </td>
    <tr>

      <tr>
        <td></td>

        <td>
          <input type="submit" value="Email This Form">
        </td>

      </tr>



</form>

Access the code here: https://codepen.io/anon/pen/qwWPwq

Answer №1

Before reaching the email validator, your code is already breaking due to issues with the name check.

if (document.signup.NAME.value == "" || document.signup.NAME.value.length < 2 || isNaN.document.signup.NAME.value )

The use of `isNaN` as if it has a `document` property is causing the code to break. The correct syntax for the third condition should be:

isNaN(document.signup.NAME.value)

However, this validation check using `isNan()` will always consider a name as invalid because it always returns true for strings. Therefore, it's best to remove it and simplify the condition to:

if (document.signup.NAME.value.trim() == "" || document.signup.NAME.value.length < 2)

UPDATE There are also some issues with your ENQ and Insurance checks. Here are the modified versions along with `trim()` added to empty string checks to handle whitespace-only input. You can view the updated code on JSFiddle: https://jsfiddle.net/z3aso7u0/

document.querySelector('[name="signup"]').addEventListener('submit', function(e) {
  e.preventDefault();
  checkData();
})

function checkData() {
  if (document.signup.TITLE.value == "") {
    alert("Please select your Title.")
    document.signup.TITLE.focus()
    return false;

  }

  if (document.signup.NAME.value.trim() == "" || document.signup.NAME.value.length < 2) {
    alert("Please fill in your Name.")
    document.signup.NAME.focus()
    return false;
  }

  if (document.signup.EMAIL.value.trim() == "") {
    alert("Please fill in your E-Mail address.")
    document.signup.EMAIL.focus()
    return false;

  }

  if (document.signup.ENQ.value == "S") {
    alert("Please select your Enquiry.")
    document.signup.ENQ.focus()
    return false;

  } 

  if (!document.signup.INS.checked && !document.signup.FEES.checked && !document.signup.BB.checked) {
    alert("Please select your Insurance.")
    document.signup.INS.focus()
    return false;

  }
  if (document.signup.MSG.value.trim() == "") {
    alert("Please type in your Message.")
    document.signup.MSG.focus()
    return false;

  }

  return true;
  
}
<form name="signup">
  <td>
    Title:*
  </td>

  <td>
    <input type="radio" name="TITLE" value="TITLE">Mr
    <input type="radio" name="TITLE" value="TITLE">Mrs
    <input type="radio" name="TITLE" value="TITLE">Miss
    <input type="radio" name="TITLE" value="TITLE">Ms
  </td>

  <tr>

    <td>Your Name: </td>

    <td>
      <input name="NAME" type="text" id="NAME" />

    </td>

  </tr>

  <tr>
    <td>E-Mail:</td>
    <td>
      <input name="EMAIL" type="text" id="EMAIL" />
    </td>
  </tr>
  <!-------->
  <tr>
    <td>
      Enquiry:*
    </td>
    <td>

      <select name="ENQ" id="ENQ">
        <option name="ENQ" value="S">Select Option</option>
        <option name="ENQ" value="sg">Suggestion</option>
        <option name="ENQ" value="sg">Complaint</option>
        <option name="ENQ" value="sg">Cancellation</option>
      </select>

  <!-------->
  <tr>
    <td>
      Select Insurance
    </td>

    <td>
      <div id="checkboxes">
        <input type="checkbox" name="INS" id="INS" value="INS" />Insurance
        <label for="one"><input type="checkbox" name="FEES" id="FEES"/>Fees</label>
        <label for="one"><input type="checkbox" name="BB" id="BB"/>Black Box</label>
      </div>
    </td>
  </tr>

  <tr>
    <td>
      Message:
    </td>

    <td>
      <textarea name="MSG" rows="5" cols="80" id "MSG"></textarea>

    </td>
    <tr>

      <tr>
        <td></td>

        <td>
          <input type="submit" value="Email This Form">
        </td>

      </tr>

</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Select a particular item and transfer its unique identifier to a different web page. Are there more efficient methods to accomplish this task without relying on href links and using the $_GET

Could there be a more efficient method for transferring the ID of a specific motorcycle from index.php to inventory.php when it is clicked on, aside from using href and $_GET? Perhaps utilizing hidden fields or submitting a form through JavaScript? What ...

Running Protractor tests can be frustratingly sluggish and frequently result in timeouts

After spending most of the afternoon struggling with this test, I've tried different approaches but none seem to work. The task at hand is searching for users within the company, generating a table, and selecting the user that matches the name. Curren ...

Failed attempt to change background color using jQuery

Creating a new notification system where I need to highlight a specific comment once it has been scrolled to. I initially thought of implementing a background color change timeout, but I'm facing some issues with it... Check out this example: I hav ...

Calculate the total width of LI elements and apply it to the parent UL or DIV

Is there a way to calculate the Total LI width and then set the width for the parent div? Here is an example of my code: <ul> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds&l ...

Customizing the appearance of the dragged element in jQuery UI

Is there a way to modify the color of a draggable list item after it has been dragged? Any assistance is greatly appreciated. $("#DragWordList li").draggable({helper: 'clone'}); ...

"Customize the look of the action button in Material-UI's

Is there a way to customize the appearance of action buttons within a Dialog, DatePicker, or TimePicker by accessing the containing div? I'm looking to add padding between these buttons and potentially change the background color of the div generated ...

Issue with emitting events from child to parent component

<div @ontabselected="sayHelloFromRoot"> <tabs> <tab></tab> <tab></tab> </tabs> </div> I have set up an event listener called ontabselected in the Tabs component and I'm emitting ...

The CSS styling is not being rendered correctly on the AngularJS HTML page

Encountering a puzzling situation here. Our angular controller is successfully delivering data to the page, but we are facing an issue with rendering a table due to an unknown number of columns: <table border="1" ng-repeat="table in xc.tables"> ...

What causes the indexOf method to return -1 even when the values are present in the array?

Could someone explain why the indexOf() method returns -1 even though the values are present in the array? The includes() function also returns false for me. I feel like I must be missing something or forgetting a crucial detail. Any insights on why the ...

Managing alerts in Python Selenium

I am encountering an issue while trying to handle a pop-up alert after a file upload. Despite using the code snippet below, I am receiving the error message shown. https://i.sstatic.net/Gqg8v.png wait.until(EC.alert_is_present()) driver.switch_to.alert() ...

Developing web components using angular.js while ensuring compatibility with IE11

I have an angular.js application where I need to initialize a web component. Everything runs smoothly on different browsers, however IE11 seems to have problems with document.importNode The angular.js onInit function is as follows: vm.$onIni ...

Steps to insert additional characters surrounding the innerhtml of an h2 element

After extensive searching, I still can't seem to figure this out. It's possible I'm overlooking something very obvious, and for that, I apologize. My current challenge involves adding two specific characters to multiple h2 elements. While I ...

Issues detected with Foundation Block Grid in small size setting

I created a React component to display a series of div elements on a page using the Foundation Block Grid system to control the number of divs per row. However, I am facing an issue where the number of divs does not change when switching to a small-sized s ...

Display either "All", "Multiple", or "Single" depending on the number of dropdown selections in AngularJS

I have a drop-down list of locations that appears in a pop-up, allowing users to select one, multiple, or all locations. The default label of the drop-down is "Choose Locations". How can I address the following scenarios: If a user selects "select all" ...

What is the best way to align my clip-path's text with the center of the viewport and ensure that all of the clip-path's text is visible?

Check out my React component demo: https://codesandbox.io/s/epic-brown-osiq1. I am currently utilizing the values of viewBox, getBBox, and getBoundingClientRect() to perform calculations for positioning elements. At the moment, I have hardcoded some values ...

What could be causing the issue with the array.push method not functioning

i have come across this piece of code function fetchImagesList(errU,errorsList) { if(errU) throw errU; var directories=new Array(); var sourceDir=''; var destinationDir=''; if(errorsList==&a ...

Utilizing *ngfor in Angular 7 to Group and Display Data

I currently have incoming data structured like this in my Angular application Visit this link to see the data format https://i.stack.imgur.com/jgEIw.png What is the best way to group and sort the data by State and County, and present it in a table as sh ...

qunit timer reset

I have developed a user interface for manually launching qunit tests. However, I have noticed that the qunit test timer starts when displaying the interface, rather than when starting the actual test. For example: var myFunction = function (){ test ...

Ensuring smooth video playback on a website

My website is experiencing issues due to a large mov file that's 157 megabytes. When I try to run it on my page using a javascript scroller animation, the animation becomes choppy. Additionally, I used css to simulate a mask, but it doesn't get m ...

When using i18next interpolation in React components, the displayed output may show as [object Object]

In my React application, I am utilizing the next-i18next package. I want to include a React component within my interpolation: import React from 'react'; import { useTranslation } from 'next-i18next'; import { serverSideTranslations } f ...