I have the following code:
<!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>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var validator = $("#my-form").bind("invalid-form.validate", function() {
$("#errtxt").html("Please correct the errors shown below:");
$("#errtxt").addClass("error-msg");
}).validate({
success: function(label) {
label.addClass("valid");
},
rules: {
text1: {
required: true
},
text2: {
required: true,
}
},
messages: {
text1: "",
text2: "",
} ,
errorElement: "span"
});
});
</script>
</head>
<body>
<form id="my-form" action="" method="post">
<span class="errtxt"></span>
<label for="text1">Text 1: </label>
<input type="text" name="text1" id="text1" />
<label for="text2">Text 2: </label>
<input type="text" name="text2" id="text2" />
<input type="submit" />
</form>
</body>
</html>
I basically want an empty span on error to display an image. However on success the image should change so it should have a different class.
The problem is my span is getting both classes "error" and "valid" whatever I do. But this is only happening because I have empty messages, if I don't have empty messages the classes seem to get applied as required. For example changing it to this works:
messages: {
text1: " ",
text2: " ",
} ,
However i'd like an empty error span just for my bg image. Is this a bug or something i'm doing wrong, I don't understand the code too much but maybe the way i'm doing this:
success: function(label) {
label.addClass("valid");
},
Could be wrong. If I have to keep using an empty space it's no big deal but it seems like a bug.
Also while we are on the subject is there any easy way to default all field messages to a default of "".
On submit, I want:
- next to each input an empty span with the class error (if the field is empty)
- or the class valid if it passes (if the field has contents).
The problem is the span is getting both classes "error valid" even when the field is empty. But if I have a error message text in it works, but ideally I don't want any error message text. I think it might be a bug. See the most simple example:
<!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>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my-form").validate({
rules: {
text1: {
required: true
},
},
messages: {
text1: "",
} ,
errorElement: "span",
success: "valid",
});
});
</script>
<style>
span.error{
float:left; width:15px; height:15px;
background:red;
}
span.valid{
display:block; width:15px; height:15px;
background:green;
}
</style>
</head>
<body>
<form id="my-form" action="" method="post">
<label for="text1">Text 1: </label>
<input type="text" name="text1" id="text1" />
<input type="submit" />
</form>
</body>
</html>
You will see this doesn't work. But this works:
<!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>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#my-form").validate({
rules: {
text1: {
required: true
},
},
messages: {
text1: " ",
} ,
errorElement: "span",
success: "valid",
});
});
</script>
<style>
span.error{
float:left; width:15px; height:15px;
background:red;
}
span.valid{
display:block; width:15px; height:15px;
background:green;
}
</style>
</head>
<body>
<form id="my-form" action="" method="post">
<label for="text1">Text 1: </label>
<input type="text" name="text1" id="text1" />
<input type="submit" />
</form>
</body>
</html>
Only difference is having something in the messages texts!
try
$(document).ready(function() {
$("#my-form").validate({
rules: {
text1: {
required: true
}
text2: {
required: true
}
},
messages: {
text1: {
required: "Please fill out text1."
}
text2: {
required: "Please fill out text2."
}
},
errorLabelContainer: ".errtxt",
success: "valid"
});
});
if this works for you, please select the check mark next to my answer. i am trying to get enough reputation to leave comments. thanks!
Related
In my form iam using jQuery validation plug-in to do validations to allow only English, but the problem now is the form text field now should allow English and Japanese only, all other characters should be omitted.
i did the validation for English characters but how to do the same for Japanese too. i have no idea how to do this. please help me iam a newbie.
my validation code for English is this :
<style>
#nwsltrsnd label.error {
color:red;
}
#nwsltrsnd input.error {
border:1px solid red;
}
</style>
<script>
$(function() {
$.validator.addMethod("accept", function(value, element, param) {
return value.match(new RegExp("." + param + "$"));
});
$('#nwsltrsnd').validate({
rules: {
name: { required: true, accept: "[a-zA-Z]+" },
email: { required: true, email: true }},
messages: {
name: { required: "Name is required",
accept: "Invalid name! either english/japanese allowed" },
email: { required: "Email is required!" }
} }); });
</script>
you can use a custom validation rule with the regular expression,
Refer below,
Regular Expression for Japanese characters
Also, when I try below it works fine:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<title>Validation Test</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form id="validate-form">
<table class="table">
<tr>
<td><input type="text" name="first_name" /></td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Validate" /></td>
</tr>
</table>
</form>
<script>
$.validator.addMethod("languageTest", function(value) {
//regEx = '/[一-龠]+|[ぁ-ゔ]+|[ァ-ヴー]+|[a-zA-Z0-9]+|[ａ-ｚＡ-Ｚ０-９]+[々〆〤]+/u';
regEx = /[一-龠]+|[ぁ-ゔ]+|[ァ-ヴー]+|[a-zA-Z0-9]+|[ａ-ｚＡ-Ｚ０-９]+[々〆〤]+/;
if(!regEx.test(value))
return false;
else if(regEx.test(value))
return true;
}, 'Please enter "anto"!');
$("#validate-form").validate({
rules : {
first_name : {
required : true,
languageTest : true
}
},
messages: {
first_name : {
required : 'Dont Leave it as blank',
languageTest : 'Invalid language'
}
}
});
</script>
<style>
.error{color:red;}
</style>
</body>
</html>
I am working on forwarding data from the current page to the same next page i.e. whenever the page is loaded again, the code checks if there is any such storage, if it is then it loads the values in text box. I am not able to get it to work Below is the code -
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function values()
{
if(localStorage.getItem(pranav))
{
document.getElementById(FName).innerText= sessionStorage.getItem(pranav);
document.getElementById(OName).innerText= sessionStorage.getItem(k);
}
else
{
sessionStorage.setItem("pranav", "P");
sessionStorage.setItem("k", "P");
return;
}
}
</script>
</head>
<body>
<form name="myform" action="Idea.html" onload="values(this.form)">
<label>Please Enter Your Full Name = </label><input type="text" name="FName" id="FName" />
<label>Please Enter Your Current Organization</label><input type="text" name="OName" id="OName" />
<input type="submit" value="Submit" onclick="values(this.form)" />
</form>
</body>
</html>
Kindly help me as to why this is not working?
You haven't declared the pranav and k variables you used. Also when you are assigning a value to an input field you should use the .value property instead of .innerText.
Also you might consider splitting your code in 2 functions:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function loadValues() {
var data = localStorage.getItem('data');
if(data) {
data = JSON.parse(data);
document.getElementById('FName').value = data.firstName;
document.getElementById('OName').value = data.lastName;
}
}
function saveValues() {
var data = {
firstName: document.getElementById('FName').value,
lastName: document.getElementById('OName').value
};
localStorage.setItem('data', JSON.stringify(data));
}
</script>
</head>
<body onload="loadValues()">
<form name="myform" action="Idea.html" onsubmit="saveValues()">
<label>Please Enter Your Full Name = </label>
<input type="text" name="FName" id="FName" />
<label>Please Enter Your Current Organization</label>
<input type="text" name="OName" id="OName" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
I Use below html page for tag-it. But when i submit the form, i can't get the value from form.
<!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=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="http://girlzunderground.com/code/tagit.js"></script>
<script >
$(function() {
$('#demo3').tagit({
tagSource:function( request, response ) {
$.ajax({
url: "http://localhost/test.com/tag/tagdb.php",
dataType: "json",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
},
triggerKeys:['enter', 'comma', 'tab'],
allowNewTags: false
});
});
//http://girlzunderground.com/php/profile-tags.php?t=books&txt=book
</script>
</head>
<body>
<div class="box">
<form action="display.php" method="post">
<ul id="demo3" class="tagit">
<li class="tagit-new" >
<input id="test1" name="test1[]" style="width:200px;" class="tagit-input ui-autocomplete-input" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"/>
</li>
</ul>
<input type="text" value="qqq" name="q"/>
<input type="submit" value="submit"/>
</form>
</div>
</body>
</html>
But when i submit the form, i can't get input "test1" value. But i can get input "q" value.
This is my display.php page
<?php
$Category=$_POST['test1'];
$q=$_POST['q'];
echo $q;
//exit();
$allCourse=NULL;
$count=0;
foreach($Category as $Cat)
{
$count=$count+1;
$allCourse=$allCourse.'~'.$Cat;
}
$allCourse=$allCourse.'~';
echo $allCourse;
?>
How can i get my tag-it value from html form..
I'm using jquery validate plugin but the following code does not is not working - Anything I enter works.
I have spent many hours trying to figure it out and I have trimmed the code to have just one sample.
The "billtoFirstName" should have between 2 and 5 characters and should not validate when I enter more that 5 or 1 char. I get no errors and the submit reveals that whatever I enter is passed to the submit. I am stumped. How can I fix it to validate?
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"> </script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<style>
#myTestForm{
font-size:20px;
border-color:black;
border-style:solid;}
#orderContactFormButton{
background-color: aqua;
float:right;
font-size: 14px;
font-weight:bold;
}
#orderContactBillTo{}
</style>
<script>
$( document ).ready(function(){
$("#myTestForm").submit(function(event){// for testing on submit
event.preventDefault(); // stop form from submitting normally
var sv = $("#billToFirstName").val();
alert(" submit button here first = " + sv);
});//submit
//validation options
$("#myTestForm").validate({
rules: {
billToFirstName:{
required:true,
minlength: 2,
maxlength: 5
}
},
messages: {
billToFirstName:{
required:"Please enter your first name",
minlength: "At least two characters are required",
maxlength: "At most 5 characters are allowed"
}
}
});//validate options for myTestform
});//document ready
</script>
</head>
<body>
<form id ="myTestForm">
<label for="billToFirstName" >First Name*:</label>
<input name ="biilToFirstName" id ="billToFirstName" size = 50>
<br>
<input id ="orderContactFormButton" type="submit" value="Submit"><br>
</form>
</body>
</html>
There is a typo:
<input name ="biilToFirstName" id ="billToFirstName" size = 50>
Just fix that and you'll be all set ...
<input name="billToFirstName" id="billToFirstName">
I am trying to get this to be if your name is Bob then you are register if not Sorry you are not allowed access but i can not figure out what I am doing wrong can someone help me thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<script type="text/javascript">
function verify() {
var name="Please enter your name: ";
if (firstName=="Bob") {
alert("Now registered");
}
else {
window.alert("Sorry you aren't allowed acess.")
return false;
}
</script>
<form name="myForm" action="#" method="post" enctype="text/plain">
<input type="text" name="BOB">First Name<br>
<input type="button" value="Submit" onclick="verify();">
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<script type="text/javascript">
function verify() {
var name="Please enter your name: ";
var firstName = document.getElementById('firstName').value;
if (firstName=="Bob") {
alert("Now registered");
return true;
}
else {
window.alert("Sorry you aren't allowed acess.")
return false;
} }
</script>
<form name="myForm" action="#" method="post" onsubmit="return verify();" enctype="text/plain">
<input id="firstName" type="text" name="BOB"/>First Name<br>
<input type="button" value="Submit"/>
</form>
</body>
</html>
you have to use onsubmit on form tag and it must return true or false
Note that you are missing the closing braces for the function, this code works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<script type="text/javascript">
function verify()
{
var name="Please enter your name: ";
if (myForm.firstName.value=="Bob")
{
alert("Now registered");
}
else
{
alert("Sorry you aren't allowed acess.")
return false;
}
}
</script>
<form name="myForm" action="#" method="post" enctype="text/plain">
<input type="text" name=firstName>First Name<br>
<input type="button" value="Submit" onclick="verify();">
</form>
</body>
</html>
This should work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<body>
<script type="text/javascript">
function verify() {
var firstName = document.getElementById('firstName').value;
if (firstName == "Bob") {
alert("Now registered");
return true;
} else {
window.alert("Sorry you aren't allowed access.");
return false;
}
}
</script>
<form name="myForm" action="#" method="post" onsubmit="return verify();" enctype="text/plain">
<input id="firstName" type="text" name="BOB"/>First Name<br>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
Update your javascript like so:
<script type="text/javascript">
function verify() {
var name="Please enter your name: ";
if (document.myForm.firstName.value=="Bob") {
alert("Now registered");
return true;
}
else {
window.alert("Sorry you aren't allowed acess.")
return false;
}
}
</script>
Then update your HTML form to this:
<form name="myForm" action="#" method="post" enctype="text/plain">
<input type="text" name="firstName" value="">First Name<br>
<input type="button" value="Submit" onclick="verify();">
</form>
your onsubmit should be on the form handler (the open tag of the "form"), not on the button.
Several issues:
You don't have a javascript variable firstName anywhere. The script probably stops there.
Your form markup for the first name field is strange (why are you naming the text box "BOB"? You should give it an ID.
You need to access the form element in javascript properly.
When submitting a form, it is better to use a submit input type and hookup the form onsubmit (in this regard the answer by #Pravat is correct, though not on the other points).
This line does nothing - var name="Please enter your name: ";
Firstly the Javascript does not know what firstname is
To fix this you need to do two things:
Use the HTML <input name="BOB" id="firstName" value="" />. Note the id attribute, we'll use this to let the JS find the element we want to examine.
Then in Javascript we can find what the user has entered in the input using document.getElementById('firstName').value.
This should let you do your comparison.
To fix minor parts of your code, I believe you forgot to open your <body> tag
your also missing a } for your function
self-close your input and br tags
Try to use:
var firstName = document.getElementById('firstName').value;
and put missing } for verify function
see this..., you also have a } missing... just before the < /script> ... the missing } is the one that closes the verify function.