Javascript Form Submit - Confirm or Cancel Submission Dialog Box

Inline validation: Error prevention at your service

To guide users and prevent unnecessary form submissions, implement inline validation. This immediate feedback mechanism not only provides users with guidance but also helps prevent erroneous submissions.

function validateForm() {
  // Validate the form data here...
  // If it's not valid... the plot thickens
  if (!isValid) {
    alert('Oops! The form has errors.');
    return false;
  }
  // All smooth sailing? Time for the unskippable ad called confirm()
  return confirm('Ready for submission?');
}

document.querySelector('form').onsubmit = validateForm;


Here, the validateForm function performs the necessary validation checks while providing user feedback through alert messages. Now the confirm dialog box only appears after validation success.

Separation of powers: Validation and confirmation

Maintaining separate functions for validation and confirmation results in cleaner and more maintainable code. Here's an example:

function hasValidationErrors(form) {
  // Check validity of form data - truth or dare style!
  // ...
  return false; // Return true if there are errors
}

function confirmSubmission() {
  // The million-dollar question!
  return confirm('Sure you want to submit?');
}

document.querySelector('form').onsubmit = function(event) {
  // Errors in the form... red alert!
  if (hasValidationErrors(this)) {
    alert('Please correct the errors.');
    event.preventDefault();
  }
  // Got cold feet halfway? The escape button is ready.
  else if (!confirmSubmission()) {
    event.preventDefault();
  }
};


By modularizing your code, you can optimize the scalability of your form submission process.

Tailoring the dialog: Make it personal!

It's entirely possible to customize your dialog box to be specific to the end-user's experience. Adapting the confirmation message to the context of your form can provide the user with valuable clarity, reducing form abandonment.

function confirmOrderSubmission() {
  // It's ordering time!
  return confirm('Are you ready to place your order?');
}


Taking the reins: Manual submission control

Sometimes, it makes sense to take complete control of the form submission process, especially after the users have hit that OK button.

function submitForm(form) {
  // Fingers crossed, off to the server!
  if (confirmOrderSubmission()) {
    form.submit();  // this.form.submit() in the context of inline event handler
  }
}

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();  // Plan cancelled! Prevent default form submission
  submitForm(this);        // Let the custom submission logic take over
});


The aesthetic touch: Sprucing up form elements

Upgrading your form's input elements to image type can significantly enhance the visual interface, while still allowing for effective JavaScript integration.

<input type="image" src="submit-button.png" onclick="return validateForm();" />


This functionally aesthetic element doubles as a trigger for form submissions, enhancing overall user experience.

Bulletproof UX: Test, iterate, and repeat

Apply these UX patterns consistently, running thorough tests to ensure the reliability of your validation and confirmation mechanisms. Bonus: It never hurts to show off your working demos on platforms like JSFiddle or CodePen.