Both Code is same only difference is one is in master page and another is not.
I just want to know what change in code i need to do when we convert the page to master page in the jquery function calling and embedding
Here workign means I can see the css effects in page and Javascrpt validation get called
This is not working (Content Page)
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="WebForm2.aspx.vb" Inherits="JqueryTest.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<%--<link rel="stylesheet" href='<%=Page.ResolveUrl("./JQuery/validationEngine.jquery.css")%>' type="text/css" />
<link rel="stylesheet" href='<%=Page.ResolveUrl("./JQuery/template.css")%>' type="text/css") />
<script src='<%=Page.ResolveUrl("./JQuery/jquery-1.6.min.js")%>' type="text/javascript">
</script>
<script src='<%=Page.ResolveUrl("./JQuery/jquery.validationEngine-en.js")%>' type="text/javascript"
charset="utf-8">
</script>
<script src='<%=Page.ResolveUrl("./JQuery/jquery.validationEngine.js")%>' type="text/javascript"
charset="utf-8">
</script>--%>
<link rel="stylesheet" href="./JQuery/validationEngine.jquery.css"
type="text/css" />
<link rel="stylesheet" href="./JQuery/template.css" type="text/css" />
<script src="./JQuery/jquery-1.6.min.js" type="text/javascript" >
</script>
<script src="./JQuery/jquery.validationEngine-en.js" type="text/javascript"
charset="utf-8" >
</script>
<script src="./JQuery/jquery.validationEngine.js" type="text/javascript"
charset="utf-8" >
</script>
<script>
jQuery(document).ready(function () {
// binds form submission and fields to the validation engine
jQuery("#formID").validationEngine();
});
function checkHELLO(field, rules, i, options) {
if (field.val() != "HELLO") {
// this allows to use i18 for the error msgs
return options.allrules.validate2fields.alertText;
}
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<p>
<a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="alert('is the form valid? '+jQuery('#formID').validationEngine('validate'))">
Evaluate form</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#sport').validationEngine('validate')">Validate
sport1 select field</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#sport').validationEngine('hide')">Close favorite
sport 1 prompt</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#formID').validationEngine('hide')">Close all prompts
on form</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#formID').validationEngine('updatePromptsPosition')">
Update all prompts positions</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#test').validationEngine('showPrompt', 'This is an example', 'pass')">
Build a prompt on a div</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#test').validationEngine('hide')">Close div prompt</a>
| <a href="http://www.position-relative.net/creation/formValidator/index.html">Back
to index</a>
</p>
<p>
This demonstration shows the different validators available
<br>
</p>
<div id="test" class="test" style="width: 150px;">
This is a div element</div>
<form id="formID" class="formular" method="post">
<fieldset>
<legend>Required! </legend>
<label>
<span>Field is required : </span>
<input value="" class="validate[required] text-input" type="text" name="req" id="req">
</label>
<legend>Placeholder & required </legend>
<label>
<span>Field is required : </span>
<input value="This is a placeholder" data-validation-placeholder="This is a placeholder"
class="validate[required] text-input" type="text" name="reqplaceholder" id="reqplaceholder">
</label>
<label>
<span>Favorite sport 1:</span>
<select name="sport" id="sport" class="validate[required]">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<label>
<span>Favorite sport 2:</span>
<select name="sport2" id="sport2" multiple="" class="validate[required]">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<br>
validate[required]
</fieldset>
<fieldset>
<legend>Custom </legend>
<label>
<p>
Comes with many predifined regex (phone, url, ip, email..etc)</p>
<a href="http://www.position-relative.net/creation/formValidator/demos/demoRegExp.html">
[DEMO]</a>
<br>
<span>Enter a URL : </span>
<input value="http://" class="validate[required,custom[url]] text-input" type="text"
name="url" id="url">
<br>
validate[required,custom[url]]
</label>
</fieldset>
<fieldset>
<legend>Function </legend>
<label>
<span>Write 'HELLO' : </span>
<input value="" class="validate[required,funcCall[checkHELLO]] text-input" type="text"
id="lastname" name="lastname">
<br>
validate[required,funcCall[checkHELLO]]
</label>
</fieldset>
<fieldset>
<legend>Past </legend>
<label>
Checks that the value is a date in the past
<br>
<span>Please enter a date ealier than 2010/01/01</span>
<input value="2009/06/30" class="validate[custom[date],past[2010/01/01]] text-input"
type="text" name="past" id="past">
<br>
validate[custom[date],past[2010/01/01]]
</label>
</fieldset>
<fieldset>
<legend>Future </legend>
<label>
Checks that the value is a date in the future
<br>
<span>Please enter a date older than today's date</span>
<input value="2011-01-" class="validate[custom[date],future[NOW]] text-input" type="text"
name="future" id="future">
<br>
validate[custom[date],future[NOW]]
</label>
</fieldset>
<fieldset>
<legend>Group required </legend>
<label>
Checks if at least one of the input is not empty.
<br>
<br>
<span>Please enter a credit card</span>
</label>
<input value="" class="validate[groupRequired[payments]] text-input" type="text"
name="creditcard1" id="creditcard1">
<label>
<strong>OR</strong></label><br>
<label>
Please enter a paypal acccount</label>
<input value="" class="validate[groupRequired[payments],custom[email]] text-input"
type="text" name="paypal" id="paypal">
<label>
<strong>OR</strong></label><br>
<label>
Please enter a bank account</label>
<input value="" class="validate[groupRequired[payments],custom[integer]] text-input"
type="text" name="bank" id="bank">
<label>
<strong>OR</strong></label><br>
<label>
Please choose from select</label>
<select class="validate[groupRequired[payments]] text-input" type="text" name="bank2"
id="bank2">
<option value="">Choose a payment option</option>
<option value="Paypal">Paypal</option>
<option value="Bank">Bank account</option>
</select>
</fieldset>
<fieldset>
<legend>Date Range<br>
</legend>
<label>
Checks that the start date is before the end date Please enter an end date ealier
than the start date<br>
<br>
<label for="date1">
Start Date :
</label>
<input value="9/1/2009" class="validate[dateRange[grp1]]" type="text" id="date1">
</label>
<label>
<label for="date2">
End Date :
</label>
<input value="3/18/1985" class="validate[dateRange[grp1]]" type="text" id="date2">
<br>
validate[dateRange[grp1]]<br>
Note* Both fields must have the same name
</label>
</fieldset>
<fieldset>
<legend>Date Time Range<br>
</legend>
<label>
Checks that the start date and time are before the end date and time Please enter
an end date ealier than the start date<br>
<br>
<label for="date1">
Start Date Time:
</label>
<input value="9/1/2009 9:30:00 PM" class="validate[dateTimeRange[grp2]]" type="text"
id="datetime1">
</label>
<label>
<label for="date2">
End Date Time:
</label>
<input value="9/1/2009 2:30:00 AM" class="validate[dateTimeRange[grp2]]" type="text"
id="datetime2">
<br>
validate[dateTimeRange[grp2]<br>
Note* Both fields must have the same name
</label>
</fieldset>
<fieldset>
<legend>Credit Card </legend>
<label>
Checks that the credit card number is at least theoretically valid, according the
to the <a href="http://en.wikipedia.org/wiki/Luhn_algorithm">Luhn checksum algorithm</a>,
but not whether the specific card number is active with a bank, etc.
<br>
<br>
Since credit cards are often presented in different formats, spaces and hyphens
(' ','-') are simply ignored.
<br>
<br>
Examples:<br>
<ul>
<li>4111 1111 1111 1111</li>
<li>3737-321345-610004</li>
</ul>
<a href="http://www.paypalobjects.com/en_US/vhelp/paypalmanager_help/credit_card_numbers.htm">
More examples</a>
<br>
<input value="" class="validate[required,creditCard] text-input" type="text" name="creditcard2"
id="creditcard2">
<br>
validate[required,creditCard]
</label>
</fieldset>
<fieldset>
<legend>Checkbox </legend>
<label>
Check this <a href="http://www.position-relative.net/creation/formValidator/demos/demoCheckBox.html">
[DEMO]</a>
</label>
</fieldset>
<fieldset>
<legend>Ajax </legend>
<label>
Check this <a href="http://www.position-relative.net/creation/formValidator/demos/demoAjaxSubmitPHP.html">
[DEMO]</a>
</label>
</fieldset>
<input class="submit" type="submit" value="Validate & Send the form!"><hr>
</form>
</asp:Content>
This is working (Normal ASPX page)
<!DOCTYPE html>
<!-- saved from url=(0081)http://www.position-relative.net/creation/formValidator/demos/demoValidators.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Validation Engine</title>
<link rel="stylesheet" href="./JQuery Validation Engine_files/validationEngine.jquery.css"
type="text/css">
<link rel="stylesheet" href="./JQuery Validation Engine_files/template.css" type="text/css">
<script src="./JQuery Validation Engine_files/jquery-1.6.min.js" type="text/javascript">
</script>
<script src="./JQuery Validation Engine_files/jquery.validationEngine-en.js" type="text/javascript"
charset="utf-8">
</script>
<script src="./JQuery Validation Engine_files/jquery.validationEngine.js" type="text/javascript"
charset="utf-8">
</script>
<script>
jQuery(document).ready(function () {
// binds form submission and fields to the validation engine
jQuery("#formID").validationEngine();
});
function checkHELLO(field, rules, i, options) {
if (field.val() != "HELLO") {
// this allows to use i18 for the error msgs
return options.allrules.validate2fields.alertText;
}
}
</script>
</head>
<body>
<p>
<a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="alert('is the form valid? '+jQuery('#formID').validationEngine('validate'))">
Evaluate form</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#sport').validationEngine('validate')">Validate
sport1 select field</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#sport').validationEngine('hide')">Close favorite
sport 1 prompt</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#formID').validationEngine('hide')">Close all prompts
on form</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#formID').validationEngine('updatePromptsPosition')">
Update all prompts positions</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#test').validationEngine('showPrompt', 'This is an example', 'pass')">
Build a prompt on a div</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#"
onclick="jQuery('#test').validationEngine('hide')">Close div prompt</a>
| <a href="http://www.position-relative.net/creation/formValidator/index.html">Back
to index</a>
</p>
<p>
This demonstration shows the different validators available
<br>
</p>
<div id="test" class="test" style="width: 150px;">
This is a div element</div>
<form id="formID" class="formular" method="post">
<fieldset>
<legend>Required! </legend>
<label>
<span>Field is required : </span>
<input value="" class="validate[required] text-input" type="text" name="req" id="req">
</label>
<legend>Placeholder & required </legend>
<label>
<span>Field is required : </span>
<input value="This is a placeholder" data-validation-placeholder="This is a placeholder"
class="validate[required] text-input" type="text" name="reqplaceholder" id="reqplaceholder">
</label>
<label>
<span>Favorite sport 1:</span>
<select name="sport" id="sport" class="validate[required]">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<label>
<span>Favorite sport 2:</span>
<select name="sport2" id="sport2" multiple="" class="validate[required]">
<option value="">Choose a sport</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>
</label>
<br>
validate[required]
</fieldset>
<fieldset>
<legend>Equals </legend>
<label>
<span>Password : </span>
<input value="karnius" class="validate[required] text-input" type="password" name="password"
id="password">
</label>
<label>
<span>Confirm password : </span>
<input value="kaniusBAD" class="validate[required,equals[password]] text-input" type="password"
name="password2" id="password2">
<br>
validate[required,equals[password]]
</label>
</fieldset>
<fieldset>
<legend>Function </legend>
<label>
<span>Write 'HELLO' : </span>
<input value="" class="validate[required,funcCall[checkHELLO]] text-input" type="text"
id="lastname" name="lastname">
<br>
validate[required,funcCall[checkHELLO]]
</label>
</fieldset>
<fieldset>
<legend>MinSize </legend>
<label>
Minimum field size
<br>
<input value="" class="validate[required,minSize[6]] text-input" type="text" name="minsize"
id="minsize">
<br>
validate[required,minSize[6]]
</label>
</fieldset>
<fieldset>
<legend>MaxSize </legend>
<label>
Maximum field size, optional
<br>
<input value="0123456789" class="validate[optional,maxSize[6]] text-input" type="text"
name="maxsize" id="maxsize">
<br>
validate[maxSize[6]]<br>
note that the field is optional - it won't fail if it has no value
</label>
</fieldset>
<fieldset>
<legend>Min </legend>
<label>
integer >= -5
<br>
<input value="-7" class="validate[required,custom[integer],min[-5]] text-input" type="text"
name="min" id="min">
<br>
validate[required,custom[integer],min[-5]]
</label>
</fieldset>
<fieldset>
<legend>Max </legend>
<label>
integer ,50]
<br>
<input value="55" class="validate[required,custom[integer],max[50]] text-input" type="text"
name="max" id="max">
<br>
validate[required,custom[integer],max[50]]
</label>
</fieldset>
<fieldset>
<legend>Past </legend>
<label>
Checks that the value is a date in the past
<br>
<span>Please enter a date ealier than 2010/01/01</span>
<input value="2009/06/30" class="validate[custom[date],past[2010/01/01]] text-input"
type="text" name="past" id="past">
<br>
validate[custom[date],past[2010/01/01]]
</label>
</fieldset>
<fieldset>
<legend>Future </legend>
<label>
Checks that the value is a date in the future
<br>
<span>Please enter a date older than today's date</span>
<input value="2011-01-" class="validate[custom[date],future[NOW]] text-input" type="text"
name="future" id="future">
<br>
validate[custom[date],future[NOW]]
</label>
</fieldset>
<fieldset>
<legend>Group required </legend>
<label>
Checks if at least one of the input is not empty.
<br>
<br>
<span>Please enter a credit card</span>
</label>
<input value="" class="validate[groupRequired[payments]] text-input" type="text"
name="creditcard1" id="creditcard1">
<label>
<strong>OR</strong></label><br>
<label>
Please enter a paypal acccount</label>
<input value="" class="validate[groupRequired[payments],custom[email]] text-input"
type="text" name="paypal" id="paypal">
<label>
<strong>OR</strong></label><br>
<label>
Please enter a bank account</label>
<input value="" class="validate[groupRequired[payments],custom[integer]] text-input"
type="text" name="bank" id="bank">
<label>
<strong>OR</strong></label><br>
<label>
Please choose from select</label>
<select class="validate[groupRequired[payments]] text-input" type="text" name="bank2"
id="bank2">
<option value="">Choose a payment option</option>
<option value="Paypal">Paypal</option>
<option value="Bank">Bank account</option>
</select>
</fieldset>
<fieldset>
<legend>Date Range<br>
</legend>
<label>
Checks that the start date is before the end date Please enter an end date ealier
than the start date<br>
<br>
<label for="date1">
Start Date :
</label>
<input value="9/1/2009" class="validate[dateRange[grp1]]" type="text" id="date1">
</label>
<label>
<label for="date2">
End Date :
</label>
<input value="3/18/1985" class="validate[dateRange[grp1]]" type="text" id="date2">
<br>
validate[dateRange[grp1]]<br>
Note* Both fields must have the same name
</label>
</fieldset>
<fieldset>
<legend>Date Time Range<br>
</legend>
<label>
Checks that the start date and time are before the end date and time Please enter
an end date ealier than the start date<br>
<br>
<label for="date1">
Start Date Time:
</label>
<input value="9/1/2009 9:30:00 PM" class="validate[dateTimeRange[grp2]]" type="text"
id="datetime1">
</label>
<label>
<label for="date2">
End Date Time:
</label>
<input value="9/1/2009 2:30:00 AM" class="validate[dateTimeRange[grp2]]" type="text"
id="datetime2">
<br>
validate[dateTimeRange[grp2]<br>
Note* Both fields must have the same name
</label>
</fieldset>
<fieldset>
<legend>Credit Card </legend>
<label>
Checks that the credit card number is at least theoretically valid, according the
to the <a href="http://en.wikipedia.org/wiki/Luhn_algorithm">Luhn checksum algorithm</a>,
but not whether the specific card number is active with a bank, etc.
<br>
<br>
Since credit cards are often presented in different formats, spaces and hyphens
(' ','-') are simply ignored.
<br>
<br>
Examples:<br>
<ul>
<li>4111 1111 1111 1111</li>
<li>3737-321345-610004</li>
</ul>
<a href="http://www.paypalobjects.com/en_US/vhelp/paypalmanager_help/credit_card_numbers.htm">
More examples</a>
<br>
<input value="" class="validate[required,creditCard] text-input" type="text" name="creditcard2"
id="creditcard2">
<br>
validate[required,creditCard]
</label>
</fieldset>
<fieldset>
<legend>Checkbox </legend>
<label>
Check this <a href="http://www.position-relative.net/creation/formValidator/demos/demoCheckBox.html">
[DEMO]</a>
</label>
</fieldset>
<fieldset>
<legend>Ajax </legend>
<label>
Check this <a href="http://www.position-relative.net/creation/formValidator/demos/demoAjaxSubmitPHP.html">
[DEMO]</a>
</label>
</fieldset>
<input class="submit" type="submit" value="Validate & Send the form!"><hr>
</form>
</body>
</html>
This is another reason why I just use JQuery’s or Google repository
Check this out: http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
Test using this
Or
Good luck!