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">
Related
Create an html page, add 3 text boxes in which the user will input 3 numbers :a,b,c
Add a button that, on click, will calculate the maximum number of the three. The result will be displayed in an alert. The program should not crash if the user does not input one or two numbers.
Cases:
If no number is introduced then a message should be displayed asking the user to input at least on number.
If only one number of the three is introduced, that number is the maximum number.
If two numbers are introduced then it should be displayed the maximum of the two.
If three numbers are introduced then it should be displayed the maximum of the three.
I started like this:
function displaysubmit() {
var numarA = document.getElementById("numarA").value;
var numarB = document.getElementById("numarB").value;
var numarC = document.getElementById("numarC").value;
var numarAAsNumber = parseInt(numarA);
var numarBAsNumber = parseInt(numarB);
var numarCAsNumber = parseInt(numarC);
if (!isNaN(numarAAsNumber) && !isNaN(numarBAsNumber) && !isNaN(numarCAsNumber)) {
var Submit = Math.max(numarA, numarB, numarC);
alert(Submit);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercitiul2</title>
<script src="exercitiul2.js" type="text/javascript"></script>
</head>
<body>
<label>a</label>
<input type="text" id="numarA" />
<label>b</label>
<input type="text" id="numarB" />
<label>c</label>
<input type="text" id="numarC" />
<button id="submit">Submit</button>
</body>
</html>
I don't know how start to write in script. Please help me.
You did good just missing some basics;
1 - Wrap your inputs and submit button in form
2 - Add on-click function to button
3 - Pass event into function
4 - prevent form from submitting/reloading using that event
5 - You do not need to add parse int, you can make your inputs type="number" instead
6 - in if statement check if all 3 fields are empty then display message, if not calculate the submit
Example:
function displaysubmit(event) {
event.preventDefault();
var numarA = document.getElementById("numarA").value;
var numarB = document.getElementById("numarB").value;
var numarC = document.getElementById("numarC").value;
if (numarA === "" && numarB === "" && numarC === "") {
alert("Enter at least one number");
} else {
var Submit = Math.max(numarA, numarB, numarC);
alert(Submit);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercitiul2</title>
<script src="exercitiul2.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>a</label>
<input type="number" id="numarA" />
<label>b</label>
<input type="number" id="numarB" />
<label>c</label>
<input type="number" id="numarC" />
<button id="submit" onclick="displaysubmit(event)">Submit</button>
</form>
</body>
</html>
Hint:
Select the elements by
document.getElementById("numarA").innerHTML
When left blank, it'll be "", and if you put it in any if statement it will return false e.g.
if (document.getElementById("numarA").innerHTML) {
someFunction();
}
won't do anything.
Did you add the button click event?
do
<button id="submit" onclick="displaysubmit()">Submit</button>
How to display 2 digits the last phone number when I input phone number to first text field and display automatic to second text field with AJAX or JavaScript or jQuery ?.
I want to get script about that for my website like this video.
I've searched everywhere in Google Search about that, I only found this JavaScript.
But that is not solution. Please help me to resolve solution and what should I do.
Where I can get AJAX or JavaScript or jQuery like that or are there soluton in this forum ?
In the code you found, changing
$('#output').text($('#txt').val());
to
$('#output').text($('#txt').val().substr(-2));
would be what you need
or
$('#output').value($('#txt').val().substr(-2));
if the output is an <input type="text" > element
I've combined this script from http://jsbin.com/oleto5/5/edit?html,js,output and http://jsfiddle.net/AEMLoviji/tABDr/
But there is a little problem in code : $('#numbers').val($('#tt').val()+String.fromCharCode(event.keyCode));
If I remove +String.fromCharCode(event.keyCode)); and script be replaced to .substr(-2)); does not work.
If I use +String.fromCharCode(event.keyCode)); is not perfect when I remove digits.
Example :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" class="jsbin" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript" class="jsbin"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js" type="text/javascript" class="jsbin"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
$('#txt').keydown(function(){
setTimeout(function() {
$('#output').text($('#txt').val().substr(-2));
}, 50);
});
});
</script>
<input id="txt" type="text" />
<div id="output"></div>
<hr>
Second script is combined by me from first script becomes like below.
<hr />
<script type="text/javascript">
$(document).ready(function() {
$("#tt").keydown(function (event) {
setTimeout(function() {
}, 50);
{
$('#numbers').val($('#tt').val()+String.fromCharCode(event.keyCode));
}
});
});
</script>
<input type="text" id="tt" />
<input type="text" id="numbers" />
</body>
</html>
Are there solution about this script ?.
What I want to do is to allow the users to have their choice whether to add more text box when filing their data.
So far I have this code
http://code.jquery.com/jquery-1.5.1.js
This is the code that I got.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.Delete{color:#ff0000;}
.Add {color:green;}
.Retrieve{color:blue;}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function(){
$('.Delete').live('click',function(e){
$(this).parent().remove();
});
$('.Add').live('click',function(e){
$('.Option:last').after($('.Option:last').clone());
});
$('.Retrieve').live('click',function(e){
$('.Option input').each(function(i,e){
alert($(e).val()); //Alerts all values individually
});
});
});
});//]]>
</script>
</head>
<body>
<div class='Option'>
<input type='text' name='txtTest'/>
<input type='text' name='txtTest'/>
<input type='text' name='txtTest'/>
<span class='Delete'>Delete</span></div>
<br/><br/>
<span class='Add'>Add Option</span>
<br/><br/>
<span class='Retrieve'>Retrieve Values</span>
</body>
</html>
That code allows me to add more text box and delete them, but my problem is I'm trying to get the value of those text box using PHP GET or PHP POST and if possible set some limit, maybe after adding 5 sets of text boxes the user will not be able to add more.
In order to post to PHP, simply wrap your HTML in a form element:
<form method="GET" action="myPage.php">
<div class='Option'>
<input type='text' name='txtTest'/>
<input type='text' name='txtTest'/>
...
</div>
</form>
Then to limit the number of .Option elements which can be added, simply declare a global variable which counts the number of .Option elements:
var optionCount = 1;
$('.Delete').live('click',function(e){
$(this).parent().remove();
optionCount--; /* Decrease optionCount. */
});
$('.Add').live('click',function(e){
if (optionCount < 5) { /* Only if optionCount is less than 5... */
$('.Option:last').after($('.Option:last').clone());
optionCount++; /* Increase optionCount. */
}
});
You must check the number of inputs in the add event.
You use form tag to transfer data to server and
you also must set "method" attribute in form tag with GET or POST
<html>
<body>
<head>
<script type='text/javascript'> $(function(){
$('.Add').live('click',function(e){
if($('.option input').length < 5)
{
$('.Option:last').after($('.Option input:last').val('').clone());
}
// Other code
// ...
}
});
</script>
</head>
<form action="welcome.php" method="post">
<input type='text' name='txtTest'/><br>
<input type='text' name='txtTest'/><br>
<input type="submit">
</form>
</body>
</html>
I'm looking to validate a URL without requiring the user to enter "http://". How it is in the form below, "http://" must be entered for the form to be submitted. I can't figure out how to do this. Any help would be much appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and a url.</title>
<link rel="stylesheet" href="http://jquery.bassistance.de/validate/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required, URL: </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
url: true
}
}
});
</script>
</body>
</html>
Edit: Took isherwood's advice:
var txt = $('#website').val();
var http = txt.indexOf('http://');
if (http > -1) {
$('#website').val(txt);
} else {
$('#website').val('http://' + txt);
}
Why not add it to the URL for your users? A URL isn't a URL without a protocol anyway (the exception being protocolless URLs, but they still have '//').
$('#myform').on('submit', function() {
var myURL = 'http://' + $('#field').val();
$('#field').val(myURL);
});
you can use addmethod with REGEX, just add the class from the method to your input
http://jqueryvalidation.org/jQuery.validator.addMethod/
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!