We Keep Coding

How can I add an animation on my HTML form when submit input is clicked and the input is empty on Javascript?

Basically, I'm coding a Javascript code that validate if a form is empty, so if one input is empty, it add an animation from Animate.css library. And if two inputs are empty, both will make the shake animation, if the whole form is empty, it will shake.
I've tried a global function with conditions that add a class and it doesn't work.
This is my form:
<form action="" id="form">
<label for="name">Name</label>
<input
type="text"
placeholder="Name"
id="name"
minlength="3"
required
/>
<br />
<label for="email">Email</label>
<input type="email" placeholder="Emai" id="email" required />
<br />
<label for="subject">Subject</label>
<input
type="text"
placeholder="Subject"
id="subject"
minlength="3"
required
/>
<br />
<label for="message">Message</label>
<textarea
name="message"
id="message"
minlength="5"
placeholder="Message"
required
style="resize: none; height: 200px"
></textarea>
<br />
<button type="submit" class="paper-btn" id="submit">
Send message
</button>
</form>
Javascript:
(function () {
var form = document.getElementById("form"),
name = form.name,
email = form.email,
subject = form.subject;
message = form.message;
function validateName(e) {
if (name.value == "" || name.value == null) {
form.classList.add("animate__animated");
name.classList.add("animate__shakeX");
e.preventDefaul();
} else {
console.log("error");
}
}
function validateEmail(e) {
if (email.value == "" || email.value == null) {
email.classList.add("animate__animated");
email.classList.add("animate__shakeX");
e.preventDefaul();
}
}
function validateSubject(e) {
if (subject.value == "" || subject.value == null) {
subject.classList.add("animate__animated");
subject.classList.add("animate__shakeX");
e.preventDefaul();
}
}
function validateMessage(e) {
if (subject.value == "" || subject.value == null) {
message.classList.add("animate__animated");
message.classList.add("animate__shakeX");
e.preventDefaul();
}
}
function validateForm(e) {
validateName(e);
validateEmail(e);
validateSubject(e);
validateMessage(e);
}
form.addEventListener("submit", validateForm);
});

I think you just need to invoke the function. ValidateForm isn't being called
(function() {
var name = document.getElementById("name");
if (name.value == "" || name.value == null) {
name.classList.add("animate__animated");
name.classList.add("animate__shakeX");
}
})();

Validating multiple fields in a form - Javascript

I am trying to validate three fields within my form. I have written the code for them and thought they would work. The only problem I'm having is that they're not done in a sequence. If i submit the form without filling in anything, it picks up the email validation.If i fill in the first name, again skips the first name and surname validation and goes straight to email. I tried to make it work in a sequence so first name first then surname and email. Any help would be appreciated.
JS
function validateForm() {
var fname = document.forms["buyProductForm"]["fname"].value;
if (fname == "") {
alert("Firstname must be filled out");
return false;
}
}
function validateForm() {
var sname = document.forms["buyProductForm"]["sname"].value;
if (sname == "") {
alert("Surname must be filled out");
return false;
}
}
function validateForm() {
var email = document.forms["buyProductForm"]["email"].value;
if (email == "") {
alert("Email must be filled out");
return false;
}
}
HTML
<form name="buyProductForm" onsubmit="return validateForm()" method="post">
<fieldset id="field1">
<legend>Personal Details</legend>
<label for="name">Firstname:</label>
<input type="text" name="fname" placeholder="Enter your first name" ><br>
<label for="name">Surname:</label>
<input type="text" name="sname" placeholder="Enter your surname"><br>
<label for="email">Email Adress:</label>
<input type="email" name="email" placeholder="Enter your email" ><br>

Jsut create only one validateForm() function and inside this function validate all your fields.
function validateForm() {
var fname = document.forms["buyProductForm"]["fname"].value;
if (fname == "") {
alert("Firstname must be filled out");
return false;
}
var sname = document.forms["buyProductForm"]["sname"].value;
if (sname == "") {
alert("Surname must be filled out");
return false;
}
var email = document.forms["buyProductForm"]["email"].value;
if (email == "") {
alert("Email must be filled out");
return false;
}
}
<form name="buyProductForm" onsubmit="return validateForm()" method="post">
<fieldset id="field1">
<legend>Personal Details</legend>
<label for="name">Firstname:</label>
<input type="text" name="fname" placeholder="Enter your first name" ><br>
<label for="name">Surname:</label>
<input type="text" name="sname" placeholder="Enter your surname"><br>
<label for="email">Email Adress:</label>
<input type="email" name="email" placeholder="Enter your email" ><br>
<input type="submit" value="Submit">
</form>

function validateForm() {
var fname = document.forms["buyProductForm"]["fname"].value;
if (fname == "") {
alert("Firstname must be filled out");
return false;
}
var sname = document.forms["buyProductForm"]["sname"].value;
if (sname == "") {
alert("Surname must be filled out");
return false;
}
var email = document.forms["buyProductForm"]["email"].value;
if (email == "") {
alert("Email must be filled out");
return false;
}
}

How to display form details after validating a form correctly?

My problem is that if I perform validation for the form alone, it performs correctly. But if I write a display function for displaying the details it can't perform the validation. How to do my validation for displaying the details which have been given to the form?
Is what I am giving on submit button correct? Are there any changes? How to declare both functions to perform correctly?
Then I have to do validation when I am displaying details. Please do help me to configure that.
<form name="RegForm" action="/submit.php" method="post">
<p>Name: <input id="name" type="text" size=65 name="Name"> </p><br>
<p>Dob: <input id="dob" type="date"></p><br>
<p> Address: <input id="address" type="text" size=65 name="Address"> </p><br>
<p>E-mail Address: <input id="mail" type="text" size=65 name="EMail"> </p><br>
<p>Password: <input id="pass" type="text" size=65 name="Password"> </p><br>
<p>Telephone: <input id="phone" type="text" size=65 name="Telephone"> </p><br>
<p>Comments: <textarea cols="55" id="Comment" name="Comment"> </textarea></p>
<p><input type="submit" value="send" name="Submit" onclick="Validate(); results(); return false">
</form>
function Validate()
{
var name = document.forms["RegForm"]["Name"];
var email = document.forms["RegForm"]["EMail"];
var phone = document.forms["RegForm"]["Telephone"];
var what = document.forms["RegForm"]["Subject"];
var password = document.forms["RegForm"]["Password"];
var address = document.forms["RegForm"]["Address"];
if (name.value == "")
{
window.alert("Please enter your name.");
name.focus();
return false;
}
if (address.value == "")
{
window.alert("Please enter your address.");
name.focus();
return false;
}
if (email.value == "")
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf("#", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (phone.value == "")
{
window.alert("Please enter your telephone number.");
phone.focus();
return false;
}
if (password.value == "")
{
window.alert("Please enter your password");
password.focus();
return flase;
}
if (what.selectedIndex < 1)
{
alert("Please enter your course.");
what.focus();
return false;
}
}
function results()
{
var name=document.getElementById('name').value;
var dob=document.getElementById('dob').value;
var address=document.getElementById('address').value;
var email=document.getElementById('mail').value;
var phone=document.getElementById('phone').value;
document.write("<b>Submitted Successfully!!</b>");
document.write("<b>here is your data.</b><br/>");
document.write("Name :"+name+ " <br/>");
document.write("DateOfBirth :"+dob+ " <br/>");
document.write("Address:"+address+ " <br/>");
document.write("Email :"+email+ " <br/>");
document.write("Telephone: "+phone+ " <br/>");
}
</script>
How to configure this?

JavaScript function is not called either by using Onclientclick or Onsubmit

I am trying to apply validation to my login page. A separate JavaScript function is Used for that, but that function is not called in any way.
<script type="text/javascript">
function myFunction() {
var pass = document.getElementById("passwordsignup").value;
var ConfirmPass = document.getElementById("passwordsignup_confirm").value;
var email = document.getElementById("emailsignup").value;
var uname = document.getElementById("usernamesignup").value;
var PassExpr = "/^[a-zA-Z0-9!##$%^&*]{6,16}$/";
var emailExp = "/^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([com\co\.\in])+$/";
if (uname == "" && email == "" && pass == "" && ConfirmPass == "") {
alert("All Feilds are Required");
return false;
}
if (uname == "")
{
alert("Please Enter User Name !!");
return false;
}
if (email == "")
{
alert("Please Enter Email !!")
return false;
}
else {
if (!email.match(emailExp)) {
alert("Please Enter Valid Email Id");
return false;
}
}
if (pass == "")
{
alert("Please Enter Password..!!");
return false;
}
else {
if(pass.length>6 && pass.length<16)
{
if (!PassExpr.test(pass)) {
alert("password should contain atleast one number and one special character");
return false;
}
}
else {
return false;
}
}
if (ConfirmPass == "")
{
alert("Please Re-Enter Password..!!");
return false;
}
else {
if (pass != ConfirmPass) {
alert("Please Re-Enter Password to Match !!!!!");
return false;
}
}
}
and my form is:
<div id="register" class="animate form">
<form id="form2" runat="server" onsubmit="return myFunction();">
<h2> Sign up </h2>
<p>
<label for="usernamesignup" class="uname">UserName</label>
<input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="User Name" runat ="server" onchange="checkUserName();"/>
<%--<asp:TextBox ID="usernamesignup1" runat="server" OnTextChanged="checkUserName()" ></asp:TextBox>--%>
<asp:Label ID="LabelStatus" runat="server" Text="Label"></asp:Label><br />
</p>
<p>
<label for="emailsignup" class="youmail" >Email </label>
<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="Email" runat="server" />
</p>
<p>
<label for="passwordsignup" class="youpasswd">password </label>
<input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="Password" runat="server"/>
</p>
<p>
<label for="passwordsignup_confirm" class="youpasswd">Please confirm your password </label>
<input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" title="Please enter the same Password as above." type="password" placeholder="Re-Enter Password" runat="server"/>
</p>
<p class="login button">
<%--<asp:Button ID="btnSignup" runat="server" Text="Sign Up" OnClick="Button1_Click" Width="150px" CssClass="btnSignup" Height="46px" />&nbsp&nbsp&nbsp&nbsp&nbsp</p>--%>
<asp:Button ID="btnSignup" runat="server" Text="Sign Up" onClientClick="return myFunction();" OnClick="btnSignup_Click" Width="150px" Height="40px"/>
</p>
The form is submitted without checking for validation. Is there any other way to call the JavaScript function?

Are you getting any javascript error? Open up your browser console, and you'll see Uncaught SyntaxErrors.

form not validating - javascript

bit of a noob with form validation. I'm trying to get this form to validate on the required fields, and something's amiss. Here's what I'm working with:
html:
<form action="../visit/thankyou.html" method="post" id="vsurvey">
<input type="hidden" name="id" value="503" />
<fieldset>
<legend>Group and Coordinator Information</legend>
<label><span>Group Leader Name<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8149" />
</label>
<label><span>Email<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8155" />
</label>
<label><span>Phone<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8156" />
</label>
<label><span>School/Organization<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8159" />
</label>
<label><span>Program</span>
<input type="text" name="question_8180" />
</label>
<label><span>Grade(s)</span>
<input type="text" name="question_8181" />
</label>
<label><span>Number of Participants<span style="color:#cc2d30">*</span></span>
<input type="text" name="question_8182" />
</label>
</fieldset>
<fieldset>
<label><span>Preferred Date<span style="color:#cc2d30">*</span></span>
<input class="date" type="text" id="question_8185" name="question_8185" />
</label>
<label><span>Second Preference Date<span style="color:#cc2d30">*</span></span>
<input class="date" type="text" id="question_8186" name="question_8186" />
</label>
<label><span>Third Preference Date<span style="color:#cc2d30">*</span></span>
<input class="date" type="text" id="question_8187" name="question_8187" />
</label>
<label>Special Accommodations
<input type="text" name="question_8174" />
</label>
</fieldset>
<label>What is the purpose or desired outcome of this visit?
<textarea name="question_13026"></textarea>
</label>
<label>How did you learn about our Group Visit Program?
<textarea name="question_8176"></textarea>
</label>
<label>Comments
<textarea name="question_8184"></textarea>
</label>
<input type="submit" id="sbutton" value="Submit Request" />
</form>
js:
function validateForm() {
var x = document.forms["vsurvey"]["question_8149"].value;
if (x == null || x == "") {
alert("Please fill in the Group Leader's name.");
return false;
}
var x = document.forms["vsurvey"]["question_8155"].value;
if (x == null || x == "") {
alert("Please fill in the email field.");
return false;
}
var x = document.forms["vsurvey"]["question_8156"].value;
if (x == null || x == "") {
alert("Please fill in the phone field.");
return false;
}
var x = document.forms["vsurvey"]["question_8159"].value;
if (x == null || x == "") {
alert("Please fill in the School/Organization field.");
return false;
}
var x = document.forms["vsurvey"]["question_8182"].value;
if (x == null || x == "") {
alert("Please indicate the number or participants.");
return false;
}
var x = document.forms["vsurvey"]["question_8185"].value;
if (x == null || x == "") {
alert("Please enter your preferred date.");
return false;
}
var x = document.forms["vsurvey"]["question_8186"].value;
if (x == null || x == "") {
alert("Please enter your second date preference.");
return false;
}
var x = document.forms["vsurvey"]["question_8187"].value;
if (x == null || x == "") {
alert("Please enter your third date preference.");
return false;
}
}
http://jsfiddle.net/blackessej/9a6BJ/1/
Currently the form submits the info anyway, but without sending the user to the thankyou page, if all required fields aren't filed in. If all required fields are filed, the thankyou page gets called.

You're not calling validatorForm. Your input button needs to be the following
<input type="submit" id="sbutton" value="Submit Request" onclick="return validateForm()" />
Or use the onsubmit event of your form
<form action="../visit/thankyou.html" method="post" id="vsurvey" onsubmit="return validateForm()">

You need to create an onSubmit event to call validateForm:
document.getElementById('vsurvey').onsubmit = validateForm;