Submission form triggered with incomplete or inaccurate data

Question

Submission form triggered with incomplete or inaccurate data

I am struggling with preventing my form from submitting if the user has not entered information or has entered it incorrectly. Despite having code in my JavaScript to handle this validation, when I click the submit button, the form still submits. I tried using code that I copied from another form validation script but it doesn't seem to be working for me.

Below is the snippet of code I added for the submit button:

var submitButton = document.querySelector('#submit');

submitButton.onclick = function(){
    var nameIsValid = checkName();
    var emailIsValid = checkEmail();
    var passwordIsValid = checkPassword();

    var valid = nameIsValid && emailIsValid && passwordIsValid;

    // Prevent default action if 'valid' still equals false
    return valid;
}

If you'd like to see the full code and test it out, you can access my fiddle at the following link: http://jsfiddle.net/pXLPv/

javascript html css

Answer 1

Answer №1

My standard practice is to always include the check routine within the onSubmit event handler for the <form> element, like so:

<form method="get" action="formhandler.asp" onSubmit="return checkForm(this);">

This approach offers the benefit of scope clarity and eliminates the need for later modifications.

I trust this information proves helpful!

Answer 2

My standard practice is to always include the check routine within the onSubmit event handler for the <form> element, like so:

<form method="get" action="formhandler.asp" onSubmit="return checkForm(this);">

This approach offers the benefit of scope clarity and eliminates the need for later modifications.

I trust this information proves helpful!

Answer 3

Answer №2

Try updating your button type to Button. It seems like the default form submission is causing issues with the Submit Click event not working properly.

<input type="button" id="submit" value="Submit"/>

Alternatively, you can utilize the form submit event in JavaScript. Check out this Demo for reference.

For the latest version, take a look at the Updated Fiddle.

Answer 4

Try updating your button type to Button. It seems like the default form submission is causing issues with the Submit Click event not working properly.

<input type="button" id="submit" value="Submit"/>

Alternatively, you can utilize the form submit event in JavaScript. Check out this Demo for reference.

For the latest version, take a look at the Updated Fiddle.

Answer 5

Answer №3

When crafting a solution for form validation, I would opt for JQuery along with the Validator plugin. A standout feature of using JQuery is the preventDefault() method, which effectively halts the button from executing its default action. By incorporating the Validator plugin, you can verify the validity of the form and proceed to submit it if all requirements are met. Additionally, AJAX can be utilized to enhance the process further. In cases where the form fails validation, prompt feedback can be provided instantly. Feel free to reach out for a detailed example once I am able to access a computer.

Answer 6

When crafting a solution for form validation, I would opt for JQuery along with the Validator plugin. A standout feature of using JQuery is the preventDefault() method, which effectively halts the button from executing its default action. By incorporating the Validator plugin, you can verify the validity of the form and proceed to submit it if all requirements are met. Additionally, AJAX can be utilized to enhance the process further. In cases where the form fails validation, prompt feedback can be provided instantly. Feel free to reach out for a detailed example once I am able to access a computer.

Answer 7

Answer №4

Make a simple adjustment to your button element by changing its type to Button.

<input type="button" id="btn_id" value="Submit"/>

Next, incorporate jQuery into your code like this:

$('#btn_id').click(function(){
    var nameValid = checkName();
    var emailValid = checkEmail();
    var passwordValid = checkPassword();

    var isValid = nameValid && emailValid && passwordValid;

    if(!isValid)
    {
        alert('Invalid Fields');
    }
    else
    {
        $('#form_id').submit();
    }
});

Answer 8

Make a simple adjustment to your button element by changing its type to Button.

<input type="button" id="btn_id" value="Submit"/>

Next, incorporate jQuery into your code like this:

$('#btn_id').click(function(){
    var nameValid = checkName();
    var emailValid = checkEmail();
    var passwordValid = checkPassword();

    var isValid = nameValid && emailValid && passwordValid;

    if(!isValid)
    {
        alert('Invalid Fields');
    }
    else
    {
        $('#form_id').submit();
    }
});

Submission form triggered with incomplete or inaccurate data

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can we make it simple for users to update webpage content using a file from their computer?

Leverage the sync function within the await .then("sync") method in JavaScript

A React component that exclusively renders component tags

Tips for managing the most recent keyup event in a search feature

Animate the background image with a float effect using jQuery's timeout feature to create an up

Ways to create a Google OAuth button with a personalized touch

Implementing JavaScript functionality with CSS and HTML on a menu

JavaScript code that displays items in a shopping cart

Looking to create a chat room on Google App Engine? Are there any demonstrations or examples available?

Revamping password security using token-based password reset system

The Precision of the IRR (Internal Rate of Return) Calculation in Javascript

Querying Denormalized Data in AngularFire 0.82: Best Practices and Strategies

Ensure that the main div remains centered on the page even when the window size is adjusted

Ways to showcase an array with HTML content in AngularJS without using ng-repeat

JSON object containing nested arrays in JavaScript

Increasing a variable in MongoDB using Meteor.js based on the value of a variable in a separate document

Customize the border width and color of a specific column in HighCharts based on dynamic data

The find() method is returning true even though the item is not actually found within the array

Stacking of div tags on top of each other

Use JQuery to load a particular page by specifying its ID with the hashtag symbol