What is the best way to prevent a form from being submitted and conduct validation using JavaScript?

Question

What is the best way to prevent a form from being submitted and conduct validation using JavaScript?

Encountered a form that is unchangeable in appearance:

<form id="mx_locator" name="mx_locator" method="post" action="search-results">

  <!-- form elements -->
  <span><input type="image" src="/images/search.png" onclick="loader()"></span>

</form>

This form is part of a CMS that automatically processes the form data and generates results when the submit button is clicked. The loader function is responsible for adding or removing a class to create an effect.

I have been assigned the task of creating a JavaScript code to validate this form. The form contains fields for zip code and city. Either one of these fields must be filled out - not both, but one or the other. Therefore, when the submit button is clicked, my JavaScript code should prevent the form from processing, check the fields, and proceed only if they meet the validation criteria.

My main concern is whether the form will still be processed regardless of the JavaScript actions, as the CMS controls its functionality. Unfortunately, I am unable to modify the HTML structure of the form, only add JavaScript code to it.

javascript forms validation expressionengine

Answer 1

Answer №1

First step is to include the onsubmit attribute within the form tag.

<form id="mx_locator" onsubmit="return ziporcity(this)" name="mx_locator" ...

Next, incorporate a script tag in your document that either contains or links to the ziporcity function, which can be defined as follows:

<script>
function ziporcity(f) { return /\d{5}/.test(f['zipFieldName'].value) || /\S/.test(f['cityFieldName'].value); }
</script>

This straightforward validation function ensures that at least one of the conditions is true: either the zip field has 5 consecutive digits (even 9 digits would pass), and/or the city field contains non-whitespace characters.

You must update zipFieldName with the actual name specified in the name="..." attribute of the zip field in your form, and replace cityFieldName with the name of the city field.

Answer 2

First step is to include the onsubmit attribute within the form tag.

<form id="mx_locator" onsubmit="return ziporcity(this)" name="mx_locator" ...

Next, incorporate a script tag in your document that either contains or links to the ziporcity function, which can be defined as follows:

<script>
function ziporcity(f) { return /\d{5}/.test(f['zipFieldName'].value) || /\S/.test(f['cityFieldName'].value); }
</script>

This straightforward validation function ensures that at least one of the conditions is true: either the zip field has 5 consecutive digits (even 9 digits would pass), and/or the city field contains non-whitespace characters.

You must update zipFieldName with the actual name specified in the name="..." attribute of the zip field in your form, and replace cityFieldName with the name of the city field.

Answer 3

Answer №2

<script>
$(document).ready(function() {
    $("#mx_locator").submit(function() {
      var isValid = checkIfFormIsValid();
      return isValid;  // returning false will stop the form from submitting
    });
});
</script>

Make sure to have jQuery included in your project. If you encounter a situation where the CMS is interfering with your form submission event, you can hide the original form and replace it with a new one.

<script>
$(document).ready(function() {
    // Save the original form HTML and hide it
    var myForm = $("#mx_locator");
    var formHtml = myForm.html();
    myForm.html("").hide();

    // Create a new form and insert it in place of the original form
    var myNewForm = $('<form id="mx_locator2" name="mx_locator2" .../></form>');
    myNewForm.html(formHtml);
    myNewForm.insertAfter(myForm);
});
</script>

Answer 4

<script>
$(document).ready(function() {
    $("#mx_locator").submit(function() {
      var isValid = checkIfFormIsValid();
      return isValid;  // returning false will stop the form from submitting
    });
});
</script>

Make sure to have jQuery included in your project. If you encounter a situation where the CMS is interfering with your form submission event, you can hide the original form and replace it with a new one.

<script>
$(document).ready(function() {
    // Save the original form HTML and hide it
    var myForm = $("#mx_locator");
    var formHtml = myForm.html();
    myForm.html("").hide();

    // Create a new form and insert it in place of the original form
    var myNewForm = $('<form id="mx_locator2" name="mx_locator2" .../></form>');
    myNewForm.html(formHtml);
    myNewForm.insertAfter(myForm);
});
</script>

What is the best way to prevent a form from being submitted and conduct validation using JavaScript?

Answer №1

Answer №2

Similar questions

Enhance a React component by including additional properties when passing it into another component through props

Achieving a collapsing navbar on click in Bootstrap 5

The value returned by a mocked Jest function is ignored, while the implemented function is not invoked

Utilizing Jquery to add a delay and animate the sliding up effect on a recently created element

The combination of Next.JS and React Objects is not acceptable as a React child

Transforming a base64 encoded string into a byte array

Unraveling Django's Registration and Login Process through Demonstrations

Is it possible to dynamically add and remove items using React state?

Is it possible for Cypress to execute test files that are imported from outside of the Cypress folder

Locate the generated ID of the inserted child when saving the parent in MongoDB

Retrieve the unique payment ID generated from the database and present it on the frontend

Ant Design radio group buttons are currently dysfunctional

problem encountered when loading an HTML file within another HTML file using AJAX

Jquery animation is dragging its feet on Explorer, while other browsers are zipping along

Dependencies for Grunt tasks

How can I save files to the ~/Documents directory using Node.js on my Mac computer?

A mistake has been identified: The object could potentially be 'null'. TS2531 for window.document

The content inside the bootstrap modal is not visible

Trouble with Vue: Sibling components unable to communicate

Having trouble with an AJAX request to display a template in Flask