I'm using rules with the 'id' as it gives me more flexibility where hooking this up to a django project the main issue being where a field name of a model is 'name' (name="name") - which appears to be a reserved word in JavaScript.
According to the docs it looks like what I want to do is possible and I'm pretty much using the exact example as given here:
http://jqueryvalidation.org/rules/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DPlugins%2FValidation%2Frules%26redirect%3Dno#.22add.22rules
Problem is I'm not getting back any of the custom error messages specified, rather I'm guessing the defaults are being returned. ie. If nothing is entered I will get the default error message back:
"This field is required"
As opposed to my custom message:
"Required input"
If I enter 1 character I get:
"Please enter at least 2 characters"
As opposed to my custom message:
"Please, at least {0} characters are necessary"
I'm running Ubuntu 12.04 and am seeing the same behavior in both Firefox and Chrome.
I'm pretty much a novice when it comes to JQuery so I'm hoping that there's an obvious problem with my copying and pasting from the docs that I've overlooked... Any advice would be appreciated.
I've included my code below.
<!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-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Example 3</title>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery.validate.js"></script>
<script type="text/javascript" language="javascript">
//Our validation script will go here.
$(document).ready(function(){
// Set up validation based around the id.
$("#form1").validate();
$( "#fname1" ).rules( "add", {
required: true,
minlength: 2,
messages: {
required: "Required input",
minlength: jQuery.format("Please, at least {0} characters are necessary")
}
});
$("#lname1").rules("add", {
required: true
});
});
</script>
<style type="text/css">
#container {
width: 350px;
height: 8em;
border: 1px #009933 solid;
background-color:#66FF66;
display:block;
}
label, input{
margin:2px 0px 1px 4px;
}
label {
margin-top:3px;
font-family:"Times New Roman", Times, serif;
font-size:1.1em;
}
</style>
</head>
<body>
<div id="container">
<form id="form1">
<label for="fname1">First Name: </label><br />
<input name="txtFirstName" type="text" id="fname1" /><br />
<label for="lname1">Last Name:</label><br />
<input name="txtLastName" type="text" id="lname1" title="Please Enter a Last Name"/><br />
<input type="submit" value="Submit" id="btnSubmit" />
</form>
</div>
</body>
</html>
Your code works fine I have tested it , mabye the second message is confusing you a little bit:
If I enter 1 character I get:
"Please enter at least 2 characters"
As opposed to my custom message:
"Please, at least {0} characters are necessary"
{0} is just a placeholder and it will get filled with the value of minlength so you are getting you custom message.
I have copy/pasted your code and tested it without changing anything and it seems to work fine :
<!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-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Example 3</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" language="javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
<script type="text/javascript" language="javascript">
//Our validation script will go here.
$(document).ready(function(){
// Set up validation based around the id.
$("#form1").validate();
$( "#fname1" ).rules( "add", {
required: true,
minlength: 5,// changed it to 5 just to test the placeholder
messages: {
required: "You custom message ",
minlength: jQuery.format("Please, at least {0} characters are necessary")
}
});
$("#lname1").rules("add", {
required: true
});
});
</script>
<style type="text/css">
#container {
width: 350px;
height: 8em;
border: 1px #009933 solid;
background-color:#66FF66;
display:block;
}
label, input{
margin:2px 0px 1px 4px;
}
label {
margin-top:3px;
font-family:"Times New Roman", Times, serif;
font-size:1.1em;
}
</style>
</head>
<body>
<div id="container">
<form id="form1">
<label for="fname1">First Name: </label><br />
<input name="txtFirstName" type="text" id="fname1" /><br />
<label for="lname1">Last Name:</label><br />
<input name="txtLastName" type="text" id="lname1" title="Please Enter a Last Name"/><br />
<input type="submit" value="Submit" id="btnSubmit" />
</form>
</div>
</body>
</html>
Related
I would like to show or hide elements of my kendo template based on whether or not a field in my model has changed or not.
First attempt:
<input type="text" data-bind="value: schedulerEventFieldOne"/>
<input type="text" data-bind="value: schedulerEventFieldTwo, visible: schedulerEventFieldOne.dirty"/>
Attempt two is to have a 'schedulerEventFieldOneOrigValue' field added to my model, then doing this:
<input type="text" data-bind="value: schedulerEventFieldOne"/>
<input type="text" data-bind="value: schedulerEventFieldTwo, visible: schedulerEventFieldOne != schedulerEventFieldOneOrigValue"/>
But this gives me an error stating that schedulerEventFieldOne is not defined. It seems that it doesn't like the equality test. Which is odd since, using a < o r > test seems to work fine: "visible: schedulerEventFieldOne > 0"
Is there a way to accomplish my task using the kendo binding? Or will I have to resort to jQuery again?
You do not state any concern, so why dont you do it on the view model with the second approach? It's possible to do this i believe :
$(document).ready(function() {
var vm = kendo.observable({
form: {
country: ""
},
original: {
country: ""
},
isDisabled: function() {
return this.get("form.country") != this.get("original.country");
},
save: function() {
}
})
kendo.bind($("#test"), vm);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="test">
<input type="text" data-bind="value: form.country" />
<button data-bind="click:save, visible:isDisabled">Save</button>
</div>
</body>
</html>
I'm using JQuery Mobile with a form that changes server side. I need to reload the page so the most recent form is included on the page. The form also needs validation.
I'm able to get the validation to work once but once until a submit. The page successfully is refreshed and the form appears but the validation is gone and if I submit, a standard submit is done instead of a changePage.
The on pageinit seems to be firing every time. I've been pulling my hair out on this one. It seems like this should be so simple.
<?php //
session_start();
if (isset($_SESSION['mytest']))
$_SESSION['mytest']++;
else
$_SESSION['mytest'] = 1;
$s = $_SESSION['mytest'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mytestout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"> </script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
</head>
<body>
<div data-role="page" data-theme='b' id="testit" >
<div data-role="content" class="content" id="cart" style="margin-top: 25px; margin-left: 40px">
<p> counting session var = <?=$s?> </p>
<form id="myform">
<input type="text" name="myname">
<input type="submit">
</form>
</div>
</div>
<script>
function submitme(e) {
$.mobile.changePage( "#testit", { transition: "slideup", changeHash: false, reloadPage: true, allowSamePageTransition: true });
}
$(document).on('pageinit', function(){ //
$("#myform").validate( {
rules: {
myname: "required"
}
,submitHandler: function(e) { submitme(e);}
});
});
</script>
</body>
</html>
The problem here is the 'pageinit' event, which runs just once per page (its also deprecated). You'd have to use the pagecontainershow event, which runs each time the page is shown. That should initialize the form validation again, making it work for each time its rendered. Note that I haven't tested that solution, yet.
I've been fighting with this for a while now and have searched extensively to no avail. I grabbed a link someone posted here in response to my same question. enter link description here I've copied the code to my editor, placed the stylesheet inline, linked all the scripts correctly I think...
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"</script>
<style> #docs{
display:block;
postion:fixed;
bottom:0;
right:0;
}
</style>
</head>
<body>
<form id="form_validation_reg_generate_user">
<input type="text" name="userPassword" id="userPassword" />
<br/>
<input type="submit" />
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$('form#form_validation_reg_generate_user').validate({
rules: {
userPassword: {
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form submission'); // for demo
return false; //form demo
}
});
});
</script>
</body>
No validation occurs... I have a feeling I'm missing something obvious. It was working in a separate page when I was only validating required fields. Since adding the minlength... nothing.
I'm doing a test with your code and it seems to work perfectly. Check if your jquery.validate.min.js path is correct and if you can access properly to every script from your system.
Also you can use your browser development tools to check if you have exceptions.
The jquery.validate.iin.js version I used in the text is from this website. Maybe you have an older script?
I'm working on a microsite for a client, and things are working almost fine, except when I tried viewing it on firefox, I was surprised by how mis-placed things looked like..even though I disabled horizontal scrolling, in firefox u could still do it ( dont see the horizontal scroll but if you scroll horizontally it shows), even the webfont is different, although the webfont displays perfectly on firefox in other pages..and the third problem is the page top-margin, in the page properties I specified the margin to be 0 and in safari it worked, but in firefox it doesn't. could anyone please tell me what to do..I only have a spry menu bar and easing (animate2id) plugin which could be causing the problem maybe? in Safari it looks the way I want it to look..thanks in advance..
maybe I should mention that I'm a novice and I know what I know by self-learning.
here's the code in case..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Annual Report 2012</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href="micro-site.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #39949C;
overflow-x: hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<link href="muli-fontfacekit/stylesheet.css" rel="stylesheet" type="text/css" />
<body leftmargin="0" topmargin="0">
<div id="rotator-controls" class="panel span2">
<div id="rotator-slides">
<a class="" href="micro-site.html" onclick="Animate2id('.slide-content'); return false" title="Go to 1st content with the default easing">1</a>
<a class="" href="#slide-content2" onclick="Animate2id('#slide-content2','easeInOutExpo'); return false">2</a>
<a class="" href="#slide-content3" onclick="Animate2id('#slide-content3','easeInOutExpo'); return false">3</a>
<a class="" href="#slide-content4" onclick="Animate2id('#slide-content4','easeInOutExpo'); return false">4</a>
<a class="" href="#slide-content5" onclick="Animate2id('#slide-content5','easeInOutExpo'); return false">5</a>
</div>
<div id="rotator-nav">
‹
›
</div>
</div>
</div><!--end of header -->
</div><!--end of slide-container -->
</div><!--end of body -->
<div id="Sitemap"></div>
</div><!--end of container -->
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
function Animate2id(id,ease){ //the id to animate, the easing type
var animSpeed=2000; //set animation speed
var $container=$("#slide-container"); //define the container to move
if(ease){ //check if ease variable is set
var easeType=ease;
} else {
var easeType="easeOutQuart"; //set default easing type
}
//do the animation
$container.stop().animate({"left": -($(id).position().left)}, 2000, easeType);
}
</script>
i have script like this....
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="bbbbb" />
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<title>for testing works</title>
<style>
div{
height: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('div').click(function(){
$(document).load('load.html');
} );
});
</script>
</head>
<body>
<div id="init">Click Me</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
</body>
</html>
in load.html i have a paragraph with with dummy content.
why this script is not changing my content of page...
loading a document object inside other is allowed or not?
You should change $(document).load('load.html'); to $('body').load('load.html');:
$(document).ready(function()
{
$('div').click(function(){
$('body').load('load.html');
return false;
});
});