Reputation: 101
Javascript form validation still submits form when null data inputted
I have created a simple form in HTML that submits data to Microsoft CDS using javascript. The form submits fine.
I wanted to put in some validation to ensure that fields must be completed (no empty fields) so I used javascript form validation. I have only done validation on the first two fields: Title and First Name.
The validation works to the extent that a message pops up saying "The title must not be empty" and "The first name must not be empty" - BUT... the form still submits!
I think the problem is that I'm using two separate Scripts, one to run the validation and one to submit the data. How do I combine the two?
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<! -- JQUERY LINK -->
<script src="jq.min.js"></script>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
input, select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
button {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<script>
function validateform(){
var title=document.myform.Title.value;
var firstname=document.myform.FirstName.value;
if (title==null || title==""){
alert("Title can't be blank");
return false;
}else if (firstname==null || firstname==""){
alert("Firstname can't be blank.");
return false;
}
}
</script>
<h3>Contact Form to submit to SP List</h3>
<! -- HTML FORM BELOW -->
<div class="container">
<form name="myform" onsubmit="return validateform()">
<! -- HTML INPUT -->
<label>Title</label>
<input type="text" id="Title" placeholder="Your title...">
<label>First Name</label>
<input type="text" id="FirstName" placeholder="Your forename..">
<label>Last Name</label>
<input type="text" id="LastName" placeholder="Your surname..">
<label>Date</label><br>
<input type="date" id="Date" placeholder="Your surname..">
<label>Country</label>
<select id="Country">
<option value="England">England</option>
<option value="Wales">Wales</option>
<option value="Scotland">Scotland</option>
</select>
<label>Message</label>
<textarea id="Message" placeholder="Write something.." style="height:200px"></textarea>
<! -- HTML SUBMISSION -->
<button id="btn_submit">Submit</button>
<input id="postResult" type="text" value="Submission status: Awaiting submission" readonly>
</form>
</div>
<! -- JS BELOW -->
<script>
$(function () {
$("#btn_submit").click(function () {
var formData = {
Title: $("#Title").val(),
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val(),
Message: $("#Message").val(),
Country: $("#Country").val(),
Date: $("#Date").val()
};
$.ajax({
contentType: 'application/json',
type: "POST",
url: "XXXXXXXXXXXX",
data: JSON.stringify(formData),
success: function () {
$("#postResult").val("Submission status: Success");
},
error: function () {
$("#postResult").val("Submission status: Failed");
}
});
});
});
</script>
</body>
</html>
Upvotes: 2
Views: 1090
Answers (3)
Reputation: 16
You could remove the validadeteform() and put all logic into the callback function.
- Remove onsubmit on your form. It should be like this:
<form name="myform">
- Change button to input type, something like this:
<input type="button" id="btn_submit" value="Submit" />
- The callback function called when you click #btn_submit should look like this:
$(function () {
$("#btn_submit").click(function () {
var formData = {
Title: $("#Title").val(),
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val(),
Message: $("#Message").val(),
Country: $("#Country").val(),
Date: $("#Date").val()
};
if (formData.Title == "" || formData.FirstName == "") {
alert("Title and Firstname can't be blank");
} else {
$.ajax({
contentType: 'application/json',
type: "POST",
url: "XXXXXXXXXXXX",
data: JSON.stringify(formData),
success: function () {
$("#postResult").val("Submission status: Success");
},
error: function () {
$("#postResult").val("Submission status: Failed");
}
});
}
});
});
Upvotes: 0
Reputation: 408
This is happening because you are not using a submit button to submit the form, you are using a regular button that launches an AJAX POST when clicked, and you are trying to stop the form from submitting using onsubmit.
In order to not submit the form you either should use the default form POST with an input submit button, and return false to onsubmit. Or call the validation when the button is clicked and if it passes the validation then call the AJAX method. Don't call the AJAX method like $("#btn_submit").click(function ()) as this will happen and you cant prevent it once the user clicks the button, you should instead call the validation and with an if you either call the AJAX method or not.
With your code it would be like:
<! -- JS BELOW -->
<script>
function validateForm(){
var title=document.myform.Title.value;
var firstname=document.myform.FirstName.value;
if (title==null || title==""){
alert("Title can't be blank");
return false;
}else if (firstname==null || firstname==""){
alert("Firstname can't be blank.");
return false;
}else{
return true;
}
}
$(function () {
$("#btn_submit").click(function () {
if(validateForm()){
var formData = {
Title: $("#Title").val(),
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val(),
Message: $("#Message").val(),
Country: $("#Country").val(),
Date: $("#Date").val()
};
$.ajax({
contentType: 'application/json',
type: "POST",
url: "XXXXXXXXXXXX",
data: JSON.stringify(formData),
success: function () {
$("#postResult").val("Submission status: Success");
},
error: function () {
$("#postResult").val("Submission status: Failed");
}
});
}
});
});
</script>
</body>
Upvotes: 2
Reputation: 798
Amend the validateform function as follow:
function validateform(){
let invalid = false
// Do the validation here. assign invalid to true if any field is invalid
if (invalid) {
window.event.preventDefault() // Prevent the default form submit behavior
} else {
// Your form submission ajax logic here...
}
}
And remove the second script block since the logic has already been embedded into the above validateform function.
Upvotes: 1
Related Questions
- Javascript cannot submit form with empty field validation
- Check if input empty on submit
- validation doesn't work if value is empty
- jQuery validation not working when input fields are empty
- Attempting to prevent submitting empty form
- prevent input from submitting when empty (not in form)
- Form is submitting even though JavaScript is picking up invalid data
- jQuery check inputs not empty before submit
- How prevent submit if input are empty with javascript
- Jquery + form : no validation if val is null