Develop Reference

How to override form validation using JavaScript

How do I write a function that overrides form validation when a user clicks the back button?
If the user doesn't fill the form and clicks submit, it tells shows " please fill in this field"
then I added a back button in case the user doesn't wanna fill the form and wants to go back
but onClick it shows "please fill in this field"
how do I override this when the user clicks back?
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
function goBack() {
window.history.back()
}
<div class="form-div">
<form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post" required>
<button onclick="goBack()">Go Back</button>
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="name"><b>FullName</b></label>
<i class="fa fa-user icon"></i>
<input type="text" placeholder="Enter Name" name="fullName" id="name" required>
<label for="email"><b>Email</b></label>
<i class="fa fa-envelope icon"></i>
<input type="text" placeholder="Enter Email" name="email" id="email" required>
<label for="psw"><b>Password</b></label>
<i class="fa fa-key icon"></i>
<input type="password" placeholder="Password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<i class="fa fa-key icon"></i>
<input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
<p>By creating an account you agree to our Terms & Privacy.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin">
<p>Already have an account? Sign in.</p>
</div>
</form>
</div>

I think removing the "required" attribute from your form tag should be good even if you keep this "required" attribute on your inputs.

This thing happen because you added button inside <form> that causing it to act as a submit button
see this: How to prevent buttons from submitting forms
so basically you can return false, but its much easer to just remove the button outside the <form>
FYI
You should ALWAYS check the values of the inputs buy yourself because everyone who is familiar with the devTools can delete the required attribute and then send empty values to your server
Another FYI
You must check the values also in the server because there are many ways you can override the client checks (you do the client side check just for UX)

Can't run script on form submit or button click

I am new to HTML, PHP and JavaScript, so expect mistakes.
I've got the form working and sending contents via email in my PHP file. That works. I'm using the Iframe to keep people on page and that seems to work as intended.
I'm trying to get a bootstrap alert to appear once the form is submitted. So it's collapsed by default and I simply want it to appear once the form is submitted or the button pressed. I cannot figure it out for the life of me. The form will submit as expected but the script does not seems to run with the alert.
The script is within the HTML doc:
<script>
function FormSubmit(){
alert("The form was submitted");
$('#AlertSuccess'.show('fade');
}
</script>
<div id="AlertSuccess" class="alert alert-success collapse">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;">
</iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>
Please make me feel silly and point out the typo or logic mistake as I've been stuck on this for a while.

You have to hide the #AlertSuccess in default and on form submit, call the show() to display the message.
And you have forgot to close the bracket in $('#AlertSuccess'.show('fade');.
It should be
$('#AlertSuccess').show('fade');
function FormSubmit(){
$('#AlertSuccess').show('fade');
}
.hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="AlertSuccess" class="alert alert-success collapse hidden">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;"></iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>

The browser console (F12) should tell you about the syntax error in you javascript. You forgot the closing ) in $('#AlertSuccess'.show('fade');.
$('#AlertSuccess').show('fade');

How to show validation message after radio buttons?

I have two inline radio button in a form using Bootstrap. But when I validate it then the message showing inside of first radio button instead of showing after second radio button. I would like to show that radio button message like Email and password. Here is the screenshot of my form.
Without Validation:
With Validation:
HTML Form:
<form name="registration" action="">
<div class="signingInner">
<h4 style="font-weight: 500; text-align:center; font-size: 20px ">Sign in to your Account</h4>
<div class="form-group">
<label for="emailId">Email Address:</label>
<input type="text" class="form-control" id="login_email" name="login_email" placeholder="Please enter Email address">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" name="login_password" id="login_password" placeholder="●●●●●●">
</div>
<div class="form-group">
<div class="radio-inline" style="padding-left: 100px;">
<input type="radio" id="user" name="LoginMode" value="user" >
As <strong>User</strong> </>
</div>
<div class="radio-inline" style="padding-left: 30px;">
<input type="radio" id="company" name="LoginMode" value="company" >
As <strong>Company</strong></>
</div>
</div>
<input type="submit" name="btnLogin" class="btn btn-lg btn-primary btn-block" value="Login"></input>
</div>
</form>
Plunker Link:
https://plnkr.co/edit/0vpvU9QbRu8Mlwbi04ti?p=preview

The trick is to use errorPlacement callback function.
So I am checking whether the rendered type is radio button then I am tracking the appropriate topmost parent div and inserting the message after that.
errorPlacement: function(error, element) {
if ( element.is(":radio") ) {
error.insertAfter( element.parent().parent().parent().parent());
}
else { // This is the default behavior of the script for all fields
error.insertAfter( element );
}
},
See the updated plunkr here.
And the output looks like
EDIT:
I have finally updated the original plunkr provided by you.

JavaScript validation of html form

I have a PHP file containing a HTML registration form. The form consists of a few fields including a phone number, password and repeat password field.
I would like these fields to be validated and require some guidance on how to validate the users input. These fields should be required and the two password fields should match.
If it fails validation I would like the user to have feedback and the form to be prevented from being submitted.
If it passes then the form should be submitted.
<div id="id02" class="modal">
<form class="modal-content animate" action="register.php" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="container">
<label><b>Name:</b></label>
<input type="text" placeholder="Enter Name" name="name" required>
<label><b>Phone No.:</b></label>
<input type="text" placeholder="Enter Phone number" name="phone" required>
<label><b>Date of Birth:</b></label>
<input type="date" placeholder="Enter Date of Birth" name="dob" required>
<label><b>E-mail:</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Password:</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label><b>Repeat Password:</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<input type="checkbox" checked="checked"> Remember me
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="submit" class="register">Register</button>
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</div>
</form>
<script>
// Get the modal
var modal = document.getElementById('id02');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event)
{
if (event.target == modal)
{
modal.style.display = "none";
}
}
</script>

Taken from https://www.w3schools.com/js/js_validation.asp (one of the first google results when googling for your question. You might want to do so yourself the next time).
You might want to adapt your code like this:
<form class="modal-content animate" action="register.php" onsubmit="return validateForm()" name="formToValidate" method="post">
[...] your other code [...]
function validateForm() {
// get value of phone number field
var x = document.forms["formToValidate"]["phone"].value;
// check phone number for being empty
if (x == "") {
alert("Phone number must be filled in");
// return false to interupt the POST request.
return false;
}
// copy, paste and adapt for the other form elements
}

Alert Box appear only when alerts from parsley.js are active

I am using Bootstrap and parsley.js (for form validation) All is working fine except I now have the error message showing up in an Alert (Bootstrap) Right now the alert box is showing on the screen whether there is an error or not. I would like it to appear only when there are errors and disappear when there isn't any errors from parsley.js. I have tried researching this issue and found some code that hid the alert box but none that worked with the alerts from Parsley.js. I typed up my own Javascript that is below thinking I could make it work, it doesn't (obviously). What should I change? Should I just trash the javascript all together and do something else? I would really love for each alert to appear in it's own Alert Box stacked one on top of another. I made a jsFiddle
Two Part Question
Make the alert box appear only when there is an error inside.
Make each alert passed from Parsley.js appear in it's own alert box (one another stacked on top of each other)
Attempted Javascript:
var x = document.getElementById("ol-error-container").innerHTML
if (x == "")
{
document.getElementById("error-container").className +=" hide";
}
else
{
document.getElementById("error-container").className =" alert";
}
Html Form Code:
<form class="form-horizontal well" data-validate="parsley" method="post">
<div class="control-group">
<input type="text" class="input-xlarge" id="fullName" placeholder="Full Name" data-required="true" data-error-container="ol#ol-error-container li.error-message" data-error-message="Please provide your name!">
</div>
<div class="control-group">
<input type="text" class="input-xlarge" id="email" placeholder="E-mail Address" data-required="true" data-type="email" data-error-container="ol#ol-error-container li.error-message" data-error-message="You must provide a valid Email Address">
</div>
<div class="control-group">
<input type="text" class="input-xlarge" id="phoneNumber" placeholder="Phone Number" data-required="true" data-type="phone" data-error-container="ol#ol-error-container li.error-message" data-error-message="You must provide a valid US Phone Number">
</div>
<div class="control-group">
<textarea cols="5" class="input-xlarge" id="question" placeholder="Question/Comments" data-required="true" data-minlength="6" data-maxlength="200" data-error-container="ol#ol-error-container li.error-message" data-error-message="Please provide a message that is 6-200 characters in lenght."></textarea>
</div>
<div class="control-group">
<div class="input-append">
<input class="input-medium" id="priority" type="text" disabled>
<div class="btn-group" data-required="true">
<button class="btn dropdown-toggle" data-toggle="dropdown">Priority <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="selectPriority">
<li><a onclick="document.getElementById('priority').value='High'">High</a>
</li>
<li><a onclick="document.getElementById('priority').value='Normal'">Normal</a>
</li>
<li><a onclick="document.getElementById('priority').value='Low'">Low</a>
</li>
</ul>
</div>
</div>
</div>
<div class="control-group">
<button type="submit" class="btn btn-primary">Submit</button>
<input type="reset" class="btn" value="cancel">
<hr>
<p class="muted"><small>We will never sell or provide your information to anyone!</small>
</p>
</div>
HTML Alert Box Code:
<div class="alert" id="error-container">
<ol id="ol-error-container" style="list-style-type:none">
<li class="error-message" style="list-style-type:none"></li>
</ol>

it should be x == "" not x = ""