jQuery form Validation not working? - javascript

this is my code for the "contact us" web page. How come it doesn't work with the jquery validator plugin? Did i do something wrong? Please help. Thanks!
The validator simply doesn't work. It allows submitting the form even I didn't fill out anything.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#myform").validate();
});
</script>
</head>
<body bgcolor="#ffffff">
<div id="contactuscontent">
<form class="cmxform" id="myform" method="post" action="sendmail.php">
Your Name: <br />
<input type="text" name="visitor" size="35" />
<br />
Your Email:<br />
<input type="email" name="visitormail" size="35" />
<br /> <br />
Subject:<br />
<input type="text" name="subject" size="35" />
<br /><br />
Mail Message:
<br />
<textarea name="notes" rows="4" cols="40" ></textarea>
<br />
<input type="submit" value="Send Mail" />
<br />
</form>
</div>
</body>
</html>

Your code works fine, but you didn't put any validation rule, that's why it does nothing.
EDIT: At least, add a class="required" to your mandatory inputs.
Best Regards.

<script>
$(document).ready(function(){
$("#myform").validate();
});
</script>
</head>
<body bgcolor="#ffffff">
<div id="contactuscontent">
<form class="cmxform" id="myform" method="post" action="sendmail.php">
Your Name: <br />
<input type="text" name="visitor" class="required" size="35" />
<br />
Your Email:<br />
<input type="email" name="visitormail" class="email required" size="35" />
<br /> <br />
Subject:<br />
<input type="text" name="subject" class="required" size="35" />
<br /><br />
Mail Message:
<br />
<textarea name="notes" rows="4" cols="40" class="required" ></textarea>
<br />
<input type="submit" value="Send Mail" />
<br />
</form>
</div>
</body>
</html>
you just need to add classes that you want on each imput not gonna go into detail but you need to look at web standards for html forms and input as well as good formatting practices

Well, jQuery is awesome. But you can do a JavaScript Form Validation without jQuery also. May refer to this JavaScript Form Validation Tutorial.

Related

javascript does not for some reason want to execute on my machine

I started using atom as my editor for learning Javascript. I've followed a bunch of tutorials online and while my code looks exactly like it does in the tuts, for some reason I'm missing the Javascript behavior. Here is a simple example of my code that simply won't run out of atom, notepadd++ or notepad. In atom I use the atom-live-server, in notepadd i basiclaly open it on local host. ANyoe have any idea?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form name="login">
<input type="text" placeholder="Username" name="UserID"><br>
<input type="text" placeholder="Password" name="Pass"><br>
<input type ="button" onclick="check(this.form)" value="Login"/>
</form>
<script type="text/javascript">
function check(form){
if(form.userId.value=="" || form.pass.value==""){
alert("BLAHBLAHBLAH")
}
}
</script>
</body>
</html>
Another method :
Specify ID's as well to the inputs.
Pass the button to the function.
Get the parent of the button (the <form>).
Get the #UserID and #Pass values using querySelector and value.
<form name="login">
<input type="text" placeholder="Username" id="UserID" name="UserID"><br>
<input type="text" placeholder="Password" id="Pass" name="Pass"><br>
<input type ="button" onclick="check(this)" value="Login"/>
</form>
<script type="text/javascript">
function check(button){
var parent=button.parentNode;
if(parent.querySelector('#UserID').value=="" || parent.querySelector('#Pass').value==""){
alert("BLAHBLAHBLAH")
}
}
</script>
The problem is that you not considering character's case sensitivity. userId and UserId are considered different. Therefore form is not able to find the reference to the UserId element and therefore erroring out. Please check the console output of the browser's developer tools to see the error. Following is the fixed code.
<p>Document</p>
<form name="login">
<input name="UserID" type="text" placeholder="Username" /><br />
<input name="Pass" type="text" placeholder="Password" /><br />
<input type="button" value="Login" onclick="check(this.form)" /></form>
<p>
<script type="text/javascript">// <![CDATA[
function check(form){
console.log('FORM', form)
if(form.UserID.value=="" || form.Pass.value==""){
alert("BLAHBLAHBLAH")
}
}
// ]]></script>
</p>
<p>Document</p>
<form name="login">
<input name="UserID" type="text" placeholder="Username" /><br />
<input name="Pass" type="text" placeholder="Password" /><br />
<input type="button" value="Login" onclick="check(this.form)" /></form>
<p>
<script type="text/javascript">// <![CDATA[
function check(form){
if(form.UserID.value=="" || form.Pass.value==""){
alert("BLAHBLAHBLAH")
}
}
// ]]></script>
</p>

HTML form with custom function call

I am developing Universal windows 8.1 app and I have a page for creating new contact.
In purpose to validate input fields I put them in form. My form action not supposed to go to service it just need to validate fields and call custom function.
HTML:
<form name="myform" onSubmit="JavaScript:OnSubmitForm()">
<div>
<label>
First name<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit"/>
<input type="button" value="Cancel"/>
</form>
JavaScript:
document.addEventListener('DOMContentLoaded', function() {
function OnSubmitForm()
{
alert('click');
}
});
My alert is never calls in plain HTML project neither in WinJS app. I also tried with:
<form name="myform" onsubmit="return OnSubmitForm();">
and the same.
Does it a good approach at all, to use form just for input fields validation or there is better way, and why this does not work ?
Inline event-binding expects functions to be under global-scope and that is one of the reason one should not use it!
In your example, OnSubmitForm is under the local scope of DOMContentLoaded handler. Best approach would be to use addEventListener and with the current code, place OnSubmitForm out of DOMContentLoaded.
document.getElementById('myform').addEventListener('submit', function(e) {
e.preventDefault(); //to prevent form submission
alert('click');
});
<form name="myform" id='myform'>
<div>
<label>
First name
<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name
<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit" />
<input type="button" value="Cancel" />
</form>
With current approach:
function OnSubmitForm() {
alert('click');
}
<form name="myform" onSubmit="JavaScript:OnSubmitForm()">
<div>
<label>
First name
<br />
<input id="contactFirstName" class="win-textbox" type="text" name="firstName" required />
</label>
</div>
<div>
<label>
Last name
<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit" />
<input type="button" value="Cancel" />
</form>
Have you tried parsley.js?
I created this fiddle to show you a quick example.
<form name="myform">
<div>
<label>
First name<br />
<input id="contactFirstName" data-parsley-required-message="First name required" class="win-textbox" type="text" name="firstName" required data-parsley-trigger="change focusout" data-parsley-pattern="/^[a-zA-Z]*$/"/>
</label>
</div>
<div>
<label>
Last name<br />
<input id="contactLastName" class="win-textbox" type="text" name="lastName" />
</label>
</div>
<input type="submit" value="Submit"/>
<input type="button" value="Cancel"/>
<script src="http://parsleyjs.org/dist/parsley.js"></script>
<script>
window.ParsleyConfig = {
errorsWrapper: '<div></div>',
errorTemplate: '<div class="alert alert-danger parsley" role="alert"></div>',
errorClass: 'has-error',
successClass: 'has-success'
};
</script>

insertion is not happening in php and mysql form

My database fields are: id,name,email_id,address,phone_no,username,password,category,date
<?php
include_once('connect_to_mysql.php');
if(isset($_POST["submit"])){
$a=mysql_real_escape_string($_POST["name"]);
$b=mysql_real_escape_string($_POST["email"]);
$c=mysql_real_escape_string($_POST["address"]);
$d=mysql_real_escape_string($_POST["phoneno"]);
$e=mysql_real_escape_string($_POST["user"]);
$f=mysql_real_escape_string($_POST["pass"]);
$g=mysql_real_escape_string($_POST["category"]);
$res=mysql_query("insert into reg(name, email_id, address, phone_no, username, password, category, date ) values ( '$a', '$b', '$c', '$d', '$e', 'md5[$f]', '$g', now() )") or die (mysql_error() );
$id = mysql_insert_id();
}
?>
There's no error reported when using the submit button, but found data is not inserted into database. I don't know what causes this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Register </title>
</head>
<body>
<div id="heading12"><?php //include_once("header.html") ?></div>
<br /><br /><br /><br /><br /><br /><br />
<div id="mainWrapper" style="background-color:#ECEEFB">
<div align="center" id="pageContent" style="background-image:url(back3.png); width:1000px;"><br /><br /><br />
<div align="center" style="color:#000000;">
<h2 style="font-size:36px">Please Fill Your all Details to Register</h2>
<br /><br />
<form id="form" name="form" method="post" action="register.php">
<h2 style="padding-right:200px;"> Name:</h2>
<input name="name" type="text" id="name" size="40" style="height:30px; font-size:20px " required placeholder="Enter NAME"/>
<br /><br />
<h2 style="padding-right:200px;">Email Address:</h2>
<input name="email" type="text" id="email" size="40" style="height:30px; font-size:20px " required placeholder="Enter Email Address"/>
<br /><br />
<h2 style="padding-right:200px;">Address</h2>
<textarea name="address" id="address" cols="44" rows="6" style="font-size:19px " required placeholder="Enter Address"></textarea>
<br /><br />
<h2 style="padding-right:200px;">Phone No.</h2>
<input name="phoneno" type="text" id="phoneno" size="40" style="height:30px; font-size:20px" required placeholder="Enter Phone No."/>
<br /><br />
<h2 style="padding-right:200px;">User Name:</h2>
<input name="user" type="text" id="user" size="40" style="height:30px; font-size:20px" required placeholder="Enter UserName"/>
<br /><br />
<h2 style="padding-right:210px;">Password:</h2>
<input name="pass" type="password" id="pass" size="40" style="height:30px; font-size:20px" required placeholder="Enter Password"/>
<br /> <br />
<h2 style="padding-right:250px;">Category:</h2>
<select name="category" id="category" style="height:30px; font-size:20px; padding-right:290px;" required placeholder="Enter The Value" >
<option value="none">Choose Any</option>
<option value="product buyer">Product Buyer</option>
<option value="product seller">Product Seller</option>
</select>
<br /> <br />
<img style="padding-right:280px;" src="generate.php"><br /><br />
<input type="text" name="secure" size="10" required placeholder="Enter The Value" style="padding-right:290px; height:30px; font-size:20px">
<br /> <br /> <br />
<input type="submit" name="log" id="log" value="Register" style="padding-right:40px; font-size:20px" />
</form>
<p> </p>
</div>
<br />
<br />
<br />
</div>
</div>
</body>
</html>
you have nothing with a name of "submit". $_POST['submit'] is never set, and your if function never runs.
your condition is looking for $_POST['submit']
$_POST['submit'] is not present
replace $_POST['submit'] by $_POST and it gets your all data
one more thing Php eliminate mysql for some reason, use mysqli for database connections and query's
Please look at the HTML for the submit button ->
input type="submit"
In your php code, you're checking if a submit button with a name "submit" exists, but actually, the name of the submit button is "log"
if(isset($_POST["submit"])) needs to be changed to if(isset($_POST["log"]))
That's all! :)

AWEBER javascript integration

i have 2 raw aweber html code, they are in separate accounts. now i want to have 1 sign up form for this two raw codes. Means when someone sign up on my form, the email should the be saved on my two list. but i got problem on how to integrate this two codes. When i remove 1 form it work for only 1 list but when i integrate the two it doesn't save any email on the two list.
heres my code ,sorry for my poor coding im new to javascript im trying hard to solved this problem hope someone can help me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--1st-->
<script language="javascript">
function copy_fields(){
<!--document.getElementById('name1').value = document.getElementById('name').value;
document.getElementById('from1').value = document.getElementById('email').value;
}
function validate(){
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if((document.submail.email.value=='')||(document.submail.email.value=='Email Address'))
{alert('Please Enter Email Address'); return false;}
if (!filter.test(document.submail.email.value))
{alert('Please Enter A Valid Email'); return false;}
document.getElementById('sub9').className='gray_out';
document.getElementById('sub9').disabled='true';
copy_fields();
document.form2.submit();
setTimeout('document.submail.submit()',3000);
}
</script>
<style type="text/css">
.gray_out {
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
}
</style>
<!--END 1st-->
<!--2nd-->
<script language="javascript">
function copy_fields1(){
<!--document.getElementById('name1').value = document.getElementById('name').value;
document.getElementById('from1').value = document.getElementById('email').value;
}
function validate1(){
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if((document.submail.email.value=='')||(document.submail.email.value=='Email Address'))
{alert('Please Enter Email Address'); return false;}
if (!filter.test(document.submail.email.value))
{alert('Please Enter A Valid Email'); return false;}
document.getElementById('sub9').className='gray_out';
document.getElementById('sub9').disabled='true';
copy_fields1();
document.form1.submit();
setTimeout('document.submail.submit()',3000);
}
</script>
<style type="text/css">
.gray_out {
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
}
</style>
<!--END 2nd-->
</head>
<body>
<form name="submail" method="post" action="http://empowerauthoritypro.com/commission-loophole-ninja" >
<input type="hidden" name="go" value="now" />
<!-- First Name:<br />
<input id="name" type="text" name="name" value="First Name" onclick="if(this.value=='First Name') this.value=''" class="text-field" /><br />-->
Email:<br />
<input id="email" type="text" name="email" value="Email Address" onclick="if(this.value=='Email Address') this.value=''" class="text-field" />
<!--Optin Now-->
<input type="button" id="sub9" value="Submit" onClick='window.open(validate1())' />
</form>
<!--1st has email requirement only-->
<form name="form2" method="post" action="http://www.aweber.com/scripts/addlead.pl" target="iframe" style="display:none">
<input type="hidden" name="meta_web_form_id" value="1817364894" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="dummylistshaq" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" /><input type="hidden" name="meta_adtracking" value="ninjatest" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
<div style="display:none">
<img src="http://forms.aweber.com/form/displays.htm?id=jByM7MxsLBycLA==" alt="" width="1" height="1" />
</div>
<input type="text" name="email" id="from1" value="" size="20">
</form>
<iframe name="iframe" style="display:none"></iframe>
<!--END 1st-->
<!--2nd has name and email requirement but i have compromise the name to be hide-->
<form name="form1" method="post" action="http://www.aweber.com/scripts/addlead.pl" target="iframe" style="display:none">
<input type="hidden" name="meta_web_form_id" value="1376972149" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="optinninja1" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" /><input type="hidden" name="meta_adtracking" value="ninjaoptin" /><input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />
<input type="hidden" name="meta_tooltip" value="" />
<div style="display:none">
<img src="http://forms.aweber.com/form/displays.htm?id=jMzsbJzsTIwsnA==" alt="" width="1" height="1" />
</div>
<input type="hidden" name="name" id="name1" value="" size="20">
<input type="text" name="email" id="from1" value="" size="20">
</form>
<iframe name="iframe" style="display:none"></iframe>
<!--END 2nd-->
</body>
</html>
A better (and AWeber-supported) way to integrate multiple services with your AWeber list is to use the AWeber API.
Another possibility might be to set up a PHP page on your own site, set it as your AWeber Form's "Thank You Page", and code your PHP to take advantage of the Pass Subscriber Data feature:
https://help.aweber.com/entries/21775518-how-do-i-pass-form-data-to-my-thank-you-pages
I'm a bit confused regarding your desired workflow. You mention submitting to two AWeber lists, yet there is a third form in your code as well that posts to a third party.
I highly recommend getting in touch with AWeber Customer Solutions who will be able to address your needs more comprehensively. Just email help#aweber.com or visit https://www.aweber.com/contact-us.htm and a team member will take an in-depth look.

radio button hide and show form content

I would like create registration form based on which country.
default address form is the default visible input
when customer click on the non-uk radio button then automatically hide uk form and oppen non-uk address form
I think I need to use javascript or JQuery for this function.
could any one give me an advice for this function.
if you think my question is not acceptable could you please don't decrease my rate.
I can remove my question if u don't like.
here is my form code
<form action="sent.php" name="form1" method="post">
Name
<input type="text" name="name" />
<br />UK
<input type="radio" name="from" value="UK">
<br />Address Line 1
<input type="text" name="ad1" />
<br />Address Line 2
<input type="text" name="ad2" />
<br />Town
<input type="text" name="town" />
<br />Post Code
<input type="text" name="post_code" />
<br />EU
<input type="radio" name="from" value="UK">
<br />Address Line 1
<input type="text" name="ad1" />
<br />Address Line 2
<input type="text" name="ad2" />
<br />Town
<input type="text" name="town" />
<br />Post Code
<input type="text" name="post_code" />
<br />Country
<input type="text" name="post_code" />
<br />
</form>
You can wrap all the input elements except the radiobuttons in two different divs so you can catch the change event for the radio buttons and show and hide two divs accordingly.
You can either add a class to represent which elements are UK address elements and which are EU or, as Élodie Petit, answered wrap them in a div and then either show or hide them depending on which radion button was selected.
Here is a JSFiddle using the latter option.
I don't think you need to show or hide the elements necessarily as the form elements seem to be the same on both 'forms', consider :
<form action="sent.php" name="form1" method="post">
Name <input type="text" name="name" /><br/>
UK <input type="radio" name="from" value="UK" > / EU <input type="radio" name="from" value="EU" ><br />
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
</form>
And then when you request the "from" parameter, you'll know which country they're from?
I found simple solution for it with JQuery
With JQuery support
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Here is the javascript code
$(document).ready(function() {
$("input[name$='from']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#c" + test).show();
});
});
</script>
here is the html code suppurated with div
<form action="sent.php" name="form1" method="post">
<label>UK <input type="radio" name="from" value="1" ></label><br />
<label>EU <input type="radio" name="from" value="2" ></label><br />
<div id="c1" class="desc">
Name <input type="text" name="name" /> <br />
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
</div>
<div id="c2" class="desc" style="display:none;">
Address Line 1 <input type="text" name="ad1" /> <br />
Address Line 2 <input type="text" name="ad2" /> <br />
Town <input type="text" name="town" /> <br />
Post Code <input type="text" name="post_code" /> <br />
Country <input type="text" name="post_code" /> <br />
</div>
</form>

Categories

Resources