We Keep Coding

Form Validation in JQuery Mobile

I'm trying to add validation to the form I made
<fieldset>
<legend>ENTER YOUR INFORMATION HERE FOR DELIVERY</legend>
<form action="" name="deliveryform">
Name* :<input type="text" name="name" id="name">
Phone Number* : <input type="text" name="phonenumber" id="phonenumber">
<span id="warning1"></span>
Address* : <textarea name="address" id="address" required></textarea>
Email* : <input type="text" name="email" id="email">
<span id="warning2"></span>
<input type="submit" id="submitbutton" value="Submit" onsubmit=" return validation()">
</form>
</fieldset>
Javascript
function validation()
{
var name = document.getElementsByName("name").value;
var phonenumber =document.getElementsByName("phonenumber").value;
var email = document.getElementById("email").value;
var emailformat = "[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$";
if(name == ""|| null)
{
alert("Please Enter Your Name!");
return false;
}
if(isNaN (phonenumber))
{
document.getElementById("warning1").innerHTML ="Enter numbers only";
return false;
}
if(!email.match(emailformat))
{
document.getElementById("warning2").innerHTML="Please enter the correct format. Example : Abc1234#gmail.com"
return false;
}
else
{
alert("Submitted Successfully")
}
}
Nothing changed except ''Error Loading Page '' message appeared.
Did I miss something?
I thought coding in without and with Jquery in HTML is the same thing..

On submission, this form will not run the validation script

I have tried and tried and cannot figure out why when I submit this form it will not activate the javascript function Validate().
This is nearly an exact replica of another form with namely one change: I've added a textarea and removed some check boxes.
I could really use some help troubleshooting this thing...
<div id="MainDivDomID">
<h1>Send us a message</h1>
<form id="contactForm" action="#" enctype="multipart/form-data" data-ajax="false" method="post" onsubmit="return Validate()">
<input name="Source" type="hidden" value="web" />
<input name="FormID" type="hidden" value="af3031b7-8f0e-433d-b116-6f10f0f231df" />
<div class="halves">
<input name="be9953c9-471c-42f4-a1cf-524f5b67fc38_First" type="text" value="" placeholder="First Name" />
<input name="be9953c9-471c-42f4-a1cf-524f5b67fc38_Last" type="text" value="" placeholder="Last Name" />
</div>
<div class="halves">
<input maxlength="255" name="463a05a6-e700-462d-b43d-0ef5cb793f11" type="text" value="" placeholder="Email" />
<input name="eae1ba0e-a5b4-423b-985c-dc36a73c45c5" type="text" placeholder="Phone Number" />
</div>
<textarea maxlength="255" name="b60680e4-3e46-43a5-b4e8-a21c6363ea0c" placeholder="Message"></textarea>
<input name="CaptchaAnswer" type="text" placeholder="Please answer the math question..." />
<img src="https://my.serviceautopilot.com/images/security-question.jpg" alt="" />
<p>
<button id="submitButtonText" class="et_pb_button et_pb_bg_layout_dark">Send Message</button>
</p>
</form>
</div>
function Validate() {
var IsValidated = true;
if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_First')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill out your first name.");
}
if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_Last')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill out your last name.");
}
var re = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var email = document.getElementsByName('017b9b5e-5595-4b74-97a2-187f45400b34')[0].value;
if (email == "" || re.test(email) != true) {
IsValidated = false;
alert("Please fill in your email address.");
}
if (document.getElementsByName('4a6b6e47-2fac-4cb4-8ca0-e4a3db4c7fc0')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill in your phone number.");
}
if (document.getElementsByName('b60680e4-3e46-43a5-b4e8-a21c6363ea0c')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill in a message.");
}
if (document.getElementsByName('CaptchaAnswer')[0].value != "8") {
IsValidated = false;
alert("Please answer the math question.");
}
if (IsValidated == true) {
document.getElementById("contactForm").submit();
} else {
alert("Please fill out all fields.");
return false;
}
}
function CreateEntity() {
document.getElementById("submitButtonText").value = "create";
Validate();
}

There is an exception at the line of code
document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_First')[0].value.trim() == ""
Dont have any name a7aa41d9-b309-48d7-af97-5a2ce65eb850_First in your document, so that the [0] is undefined.
If you change from
if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_First')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill out your first name.");
}
to
if (document.getElementsByName('be9953c9-471c-42f4-a1cf-524f5b67fc38_First')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill out your first name.");
}
The message Please fill out your first name will shown.

You need to prevent the default behavior using e.preventDefault(); otherwise it will try to submit the form
function Validate(e) {
e.preventDefault();
var IsValidated = true;
if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_First')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill out your first name.");
}
if (document.getElementsByName('a7aa41d9-b309-48d7-af97-5a2ce65eb850_Last')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill out your last name.");
}
var re = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var email = document.getElementsByName('017b9b5e-5595-4b74-97a2-187f45400b34')[0].value;
if (email == "" || re.test(email) != true) {
IsValidated = false;
alert("Please fill in your email address.");
}
if (document.getElementsByName('4a6b6e47-2fac-4cb4-8ca0-e4a3db4c7fc0')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill in your phone number.");
}
if (document.getElementsByName('b60680e4-3e46-43a5-b4e8-a21c6363ea0c')[0].value.trim() == "") {
IsValidated = false;
alert("Please fill in a message.");
}
if (document.getElementsByName('CaptchaAnswer')[0].value != "8") {
IsValidated = false;
alert("Please answer the math question.");
}
if (IsValidated == true) {
document.getElementById("contactForm").submit();
} else {
alert("Please fill out all fields.");
return false;
}
}
function CreateEntity() {
document.getElementById("submitButtonText").value = "create";
Validate();
}
<div id="MainDivDomID">
<h1>Send us a message</h1>
<form id="contactForm" action="#" enctype="multipart/form-data" data-ajax="false" method="post" onsubmit="return Validate(event)">
<input name="Source" type="hidden" value="web" />
<input name="FormID" type="hidden" value="af3031b7-8f0e-433d-b116-6f10f0f231df" />
<div class="halves">
<input name="be9953c9-471c-42f4-a1cf-524f5b67fc38_First" type="text" value="" placeholder="First Name" />
<input name="be9953c9-471c-42f4-a1cf-524f5b67fc38_Last" type="text" value="" placeholder="Last Name" />
</div>
<div class="halves">
<input maxlength="255" name="463a05a6-e700-462d-b43d-0ef5cb793f11" type="text" value="" placeholder="Email" />
<input name="eae1ba0e-a5b4-423b-985c-dc36a73c45c5" type="text" placeholder="Phone Number" />
</div>
<textarea maxlength="255" name="b60680e4-3e46-43a5-b4e8-a21c6363ea0c" placeholder="Message"></textarea>
<input name="CaptchaAnswer" type="text" placeholder="Please answer the math question..." />
<img src="https://my.serviceautopilot.com/images/security-question.jpg" alt="" />
<p>
<button type='submit' id="submitButtonText" class="et_pb_button et_pb_bg_layout_dark">Send Message</button>
</p>
</form>
</div>

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.

Input Validation function not working

I have a function to check if any text is entered in the email field but it is not working.
I am not sure what I am missing.
This is my Form:
<fieldset>
<legend>Contact Information</legend>
<form action="" id="contactInfo" onsubmit="checkform()">First Name:
<input type="text" name="fname" id="fname">
<br />Last Name:
<input type="text" name="lname" id="laname">
<br />Email:
<input type="text" name="email" id="email">
<br />
<button type="submit">Submit</button>
</form>
</fieldset>
This is my function in a seperate .js file
function checkform(form) {
if (document.form.email.value = "") {
alert("Please enter your email address.");
document.form.email.focus();
return false;
}
return true;
}

Here is a demo.
HTML
<fieldset>
<legend>Contact Information</legend>
<form id="contactInfo" onsubmit="checkform()">
First Name: <input type="text" name="fname" id="fname"><br />
Last Name: <input type="text" name="lname" id="laname"><br />
Email: <input type="text" name="email" id="email"><br />
<button type="submit">Submit</button>
</form>
</fieldset>
JavaScript
function checkform(form)
{
console.log(form);
if(document.forms[0].email.value == ""){
alert("Please enter your email address.");
document.form.email.focus();
return false;
}
return true;
}

Use this instead:
document.forms[0].email.value
or use form ID to retrieve the value.
function checkform(form) {
if (document.forms[0].email.value == "") {
alert("Please enter your email address.");
document.forms[0].email.focus();
return false;
}
}
fiddle

Pass the form in as the argument this to your checkForm() function. This way you can use the checkForm() function with multiple forms. Like so:
<fieldset>
<legend>Contact Information</legend>
<form action="" id="contactInfo" onsubmit="checkform(this)">First Name:
<input type="text" name="fname" id="fname">
<br />Last Name:
<input type="text" name="lname" id="laname">
<br />Email:
<input type="text" name="email" id="email">
<br />
<button type="submit">Submit</button>
</form>
</fieldset>
Then you can access the form element with out the document. prefix from your validation function like so:
function checkform(form) {
if (form.email.value == "") {
alert("Please enter your email address.");
form.email.focus();
return false;
}
return true;
}
(Also, make sure you check form.email.value == "" not form.email.value = "" which is the assignment operator).

Can't insert spaces in my text input

I have a form with 3 text inputs, the problem is, when I want to insert a space it doesn't allow me to. My code is:
<form action="post.php" name="MYFORM" id="MYFORM" method="post">
<label>Name</label>
<input name="name" size="30" type="text" id="name">
<br clear="all" />
<label>Email</label>
<input name="email" size="30" type="text" id="email">
<br clear="all" />
<label>Message</label>
<textarea id="message" name="message"></textarea>
<br clear="all" /><br clear="all" />
<label> </label>
<input value="Send" type="submit" id="Send">
When it submits it is validated by a javascript file and afterwards mailed by a php file, but I dont think that matters.
PROBLEM: cant add spaces in these text inputs.
Thanx in advance
EDIT: JAVASCRIPT CODE:
$(document).ready(function() {
$('#Send').click(function() {
// name validation
var nameVal = $("#name").val();
if(nameVal == '') {
$("#name_error").html('');
$("#name").after('<div class="errorwrapper"><label class="error" id="name_error">Please enter your name.</label></div>');
return false
}
else
{
$("#name_error").html('');
}
/// email validation
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddressVal = $("#email").val();
if(emailaddressVal == '') {
$("#email_error").html('');
$("#email").after('<div class="errorwrapper"><label class="error" id="email_error">Please enter your email address.</label></div>');
return false
}
else if(!emailReg.test(emailaddressVal)) {
$("#email_error").html('');
$("#email").after('<div class="errorwrapper"><label class="error" id="email_error">Enter a valid email address.</label></div>');
return false
}
else
{
$("#email_error").html('');
}
var mesVal = $("#message").val();
if(mesVal == '') {
$("#mes_error").html('');
$("#message").after('<div class="errorwrapper"><label class="error" id="mes_error">Please enter a message.</label></div>');
}
else
{
$("#after_submit").html('');
$("#Send").after('<label class="success" id="after_submit">Your message has been submitted.</label>');
$("#after_submit").fadeOut(9000);
$("#mes_error").html('');
clear_form();
}
return false;
})
function clear_form()
{
$("#name").val('');
$("#email").val('');
$("#message").val('');
$(".errorwrapper").empty();
}
});

I would have never figured it out if i wouldnt have seen an other person with an error in using a keyboard controlled javascript slideshow. Sry if i caused you guys wasting some time.
I was using fadeslideshow 2.0 by Pascal Bajorat.