I am using jquery validate plugin to validate dynamically loaded form. For some cases I'm loading the content using $.post and in the callback I call a function that adds the validation rules. That works. For some content, I am using $.get and in that callback I am also calling a function that adds the validation rules. However, when using $.get the form is not validated at all.
What is my problem? Is there really any kind of difference using post and get in this perspective?
I think this is the significant code but I did add a lot of code after this in case it's needed. This is where I call the function that adds the validation rules:
$.get("http://localhost/SMICAdmin/adminactivities/admin_update_agent.php", { agent_id: $agentid }, function(data){
//Now, add the validation rules:
addUpdateAgentValidation();
$('#dialog-modal').dialog( "option", "title", 'Uppdatera agent');
$("#dialog-modal").html(data).dialog("open");
This is the code loading the form:
$("#agents td").live('click',function(event)
{
//alert("Agents");
event.preventDefault();
var col = $(this).parent().children().index($(this));
var $td= $(this).closest('tr').children('td');
var $agentid=$td.eq(2).text();
var $name=$td.eq(3).text();
if(col==0){
$.get("http://localhost/SMICAdmin/adminactivities/admin_update_agent.php", { agent_id: $agentid }, function(data){
//alert("GETDONE");
//Now, add the validation rules:
addUpdateAgentValidation();
$('#dialog-modal').dialog( "option", "title", 'Uppdatera agent');
$("#dialog-modal").html(data).dialog("open");
});
//and the rest of the code
//.
//.
Here is the function for adding the validation rules:
function addUpdateAgentValidation(){
//alert("GETDONE 2");
$("#updateagentform").validate({
errorContainer: "#updateagentmessagebox",
errorLabelContainer: "#updateagentmessagebox ul",
wrapper: "li", debug:true,
rules: {
email1: {// compound rule
// required: true,
email: true
},
email2: {
// required: true,
equalTo: "#email1"
},
username: {
// required: true,
remote: "http://localhost/SMICAdmin/smicsoap/soap_is_agentusername_available.php"
},
password: {
// required: true
},
password2: {
//required: true,
equalTo: "#password1"
}
},
messages: {
email1: {// compound rule
email: "Korrekt emailadress saknas"
},
email2: {
equalTo: "Mailadresserna matchar inte varandra"
},
//username: "Anv‰ndarnamnet mÂste vara unikt"
username: {
remote: "Användarnamn finns redan"
},
password2: {
equalTo: "Lösenord inte lika"
}
}
});
};
And this is where where I post the form:
$("#updateagentform").live("submit", function(e){
//Prevent the form from submitting normally
// alert("Trying to submit user update");
e.preventDefault();
$.post("http://localhost/SMICAdmin/adminactivities/admin_update_agent.php",$(this).serialize(),function(msg){
//alert the response from the server
//alert(msg);
$("#dialog-modal").dialog("close");
});
$("#usertable").empty();
$('#usertable').load("http://localhost/SMICAdmin/adminactivities/admin_load_agents.php");
$("#modalarea").empty();
$('#modalarea').css("visibility","hidden");
});
And the code generating the form:
echo "<div class='errormessage' id='updateagentmessagebox'>
<ul></ul>
</div>
<form id='updateagentform' method='post'>
Ändra önskade fält<br/>
* Förnamn: <input type='text' name='firstname' /> <br/>
* Efternamn: <input type='text' name='surname' /> <br/>
* Email: <input id='email1' type='text' name='email1' /> <br/>
* Repetera email: <input id='email2' type='text' name='email2' /> <br/>
* Användarnamn: <input id='username_ID' type='text' name='username' /><br/>
* Lösenord: <input id='password1' type='text' name='password' /><br/>
* Repetera lösenord: <input id='password2' type='text' name='password2' /><br/>";
foreach ($roles as $key=>$role) {
if(in_array($key, $role_ids)){
echo "<input type='checkbox' name='rid".$key."' value='rid".$key."' checked />".$role."<br/>";
}else{
echo "<input type='checkbox' name='rid".$key."' value='rid".$key."' />".$role."<br/>";
}
}
echo "<input id='submitupdateagentform' type='submit' value='Uppdatera agent' /></form>";
What is my problem and how do I fix it?
You're calling .validate() on a form that doesn't exist on the page yet.
$.get("http://localhost/SMICAdmin/adminactivities/admin_update_agent.php", { agent_id: $agentid },
function(data){
// form does not exist in DOM here
addUpdateAgentValidation();
$('#dialog-modal').dialog( "option", "title", 'Uppdatera agent');
// form exists after this line.
$("#dialog-modal").html(data).dialog("open");
});
You need to rearrange your function call so that .validate() gets called after the form gets appended to the DOM:
$.get("http://localhost/SMICAdmin/adminactivities/admin_update_agent.php", { agent_id: $agentid },
function(data){
$('#dialog-modal').dialog( "option", "title", 'Uppdatera agent');
$("#dialog-modal").html(data).dialog("open");
addUpdateAgentValidation();
});
Related
When I use 'ignore' of validate() method, submission has been proceeded regardless of the result of validation(good or bad).
It is like 'ignore' make validation of all input elements bypass. So even if one or more input elements don't satisfy conditions for validation, the form has been submitted and server will work.
Oh, in my case, 'ignore' makes submitHandler and (even!) invalidHandler not work either.
What's wrong point? Here's my sampled(not entire) code below.
$('#frm').validate({
submitHandler: function() {
var applyMsg = "Proceed?";
var f = confirm(applyMsg);
if(f) {
//console.log(" confirm : "+ f );
return true;
} else {
//console.log(" no confirm : "+ f );
return false;
}
},
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
alert(validator.errorList[0].message);
validator.errorList[0].element.focus();
}
},
ignore: '.ignore',
rules: {
PHOTO_PLACE: {photo_place: true}
},
messages: {
PHOTO_PLACE: {required: ""},
ENT_DATE: {minlength: "", maxlength: ""}
}
});
<form id="frm" name="frm" method="post" class="app_frm">
<input type="hidden" id="PHOTO_PLACE" name="PHOTO_PLACE" />
<input type="text" name="ENT_DATE" minlength="8" maxlength="8" class="ignore" />
</form>
Thank you for any help.
I am trying to validate a form using jquery validation and I keep receiving an error "Uncaught TypeError: Cannot read property 'settings' of undefined".
The error is coming from the jquery-latest.min.js file and my jquery.validate.min.js file. Any suggestions on how to fix this?
Also, when I remove validationObj.form(); block, the error goes away, but then the validation rules are not running.
Here is my HTML:
<div id="contactForm">
<p>Contact Information</p></br>
<div id="contactInfo">
<label>First Name:</label>
<input type="text" name="fName" id="fName"/></br>
<label>Last Name:</label>
<input type="text" name="lName" id="lName"/></br>
<label>Email:</label>
<input type="text" name="email" id="email"/></br>
<label>Phone:</label>
<input type="text" name="phone" id="phone"/></br>
</div></br>
And here is my js:
var validationObj = $("#contactForm").validate
(
{
rules:
{
fName:{required:true},
lName:{required:true},
email:{required:true, email:true},
},//End rules
messages:
{
fName:{equalTo:"Please enter your first name"},
lName:{equalTo:"Please enter your last name"},
email:{minlength:"Please enter a valid email"},
},//End messages
errorPlacement:
function(error, element)
{
error.appendTo( element.next());
}
}//End validationObj
);//End var validationObj
validationObj.form();
$("form").submit
(function(e)
{
if(!validationObj.form())
{
alert("Form Errors");
}
}
);
}
Wrapped it in a form and removed the call before the submit. Working fiddle.
var validationObj = $("#contactForm").validate({
rules: {
fName: {
required: true
},
lName: {
required: true
},
email: {
required: true,
email: true
},
}, //End rules
messages: {
fName: {
equalTo: "Please enter your first name"
},
lName: {
equalTo: "Please enter your last name"
},
email: {
minlength: "Please enter a valid email"
},
}, //End messages
errorPlacement: function(error, element) {
error.appendTo(element.next());
}
} //End validationObj
); //End var validationObj
$("#contactForm").submit(function(e) {
if (!validationObj.form()) {
alert("Form Errors");
} else {
alert("Form Valid");
}
});
So I'm using jquery validate to validate a form, and it's working for the most part, but my confirm password input isn't doing anything. It doesn't show that it's a required field, when I'm telling it to be required just like the rest of the fields, and the equalTo: method I'm using doesn't work, however I don't think the equalTo: method is the problem because the required:true doesn't work either.
Here's my JQuery
<script type="text/javascript">
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#user").validate({
wrapper: 'div',
errorLabelContainer: "#messageBox",
debug: false,
rules: {
username: {
required: true,
minlength: 5
},
password: {
required: true,
minlength: 5
},
confirmPassword: {
required: true,
equalTo: "#password"
},
termsOfService: "required",
},
messages: {
username: {
required: "Please enter a username",
minlength: "Must be at Least 5 characters",
},
password: {
required: "Please enter a password",
minlength: "Must be at least 5 characters"
},
confirmPassword:{
required: "Confirm Password required",
equalTo: "Passwords don't match"
},
termsOfService: "please accept our terms of service",
},
submitHandler: function(form) {
form.submit();
}
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
</script>
and here's my jsp page form
<form:form commandName="user" method="POST">
Username: <br><form:input path="username"/><br><br>
Password: <br><form:password path="password"/><br><br>
Confirm Password: <br><input type="password" id="confirmPassword"/><br><br>
Terms of Service<form:checkbox path="termsOfService" id="termsOfService" style="vertical-align: middle; margin-left: 15px;"/><br><br>
<input type ="submit" id="submitBtn" value="Submit"/><br><br>
</form:form>
As mentioned in comment, I'm not familiar with JSP but very much familiar with jQuery validation plugin,
First your are missing id="password" to password input
<form:password path="password" id="password" />
and then path to confirm password input
<form:password path="confirmPassword" id="confirmPassword"/>
jQuery validation plugin to set the rules based on inputs name attributes or in JSP path so not able to find confirm password because of missing path and equalTo failing because you binding it with "#password" but no id="password" given in password input
I have following input elements on my form and and validation form with jQuery validation plugin.
HTML:
<form name='frmUsers' id='frmUsers' method='post' action='#'>
<div>
<input type='text' name='name' id='name' placeholder='Name' />
</div>
<br />
<div>
<input type='text' name='fixed_budget' id='fixed_budget' placeholder='Fixed budget' />
</div>
<br />
<div>
<select name='budget' id='budget'>
<option value=''>Select your budget</option>
<option value='1000'>1000</option>
<option value='2000'>2000</option>
<option value='3000'>3000</option>
<option value='4000'>4000</option>
</select>
</div>
<br/>
<div>
<input id='save' type='submit' value='Save' />
</div>
</form>
jQuery validation:
$(document).ready(function () {
$("#frmUsers").validate({
onkeyup: false,
onfocusout: false,
ignore: [],
rules: {
"name": {
required: true
},
"fixed_budget": {
required: true
},
"budget": {
required: true
}
},
messages: {
"name": {
required: 'required'
},
"first_name": {
required: 'required'
},
"last_name": {
required: 'required'
}
},
errorPlacement: function (error, element) {
},
submitHandler: function () {
return false;
}
});
});
Now all elements are required fields but I have specific condition on Fixed budget (text box) and budget (select box).
For example:
When user click on submit, fixed budget and budget elements display with errors but (1) when user select any option on budget, set fixed budget field to not required. (2) when user input something on fixed budget set budget field to not required.
Here is my working JSFiddle: http://jsfiddle.net/mananpatel/85KR4/384/
Any Idea?
Thanks.
(1) when user select any option on budget, set fixed budget field to not required. (2) when user input something on fixed budget set budget field to not required.
In other words, you only require one of those two fields filled out.
Include the additional-methods.js file and use the require_from_group method.
rules: {
name: {
required: true
},
fixed_budget: {
require_from_group: [1, ".requiredGroup"]
},
budget: {
require_from_group: [1, ".requiredGroup"]
}
},
DEMO: http://jsfiddle.net/7om97gk8/
Note:
Use return false within the errorPlacement function if you want to suppress messages. Don't leave the function empty, as that's sloppy coding.
errorPlacement: function (error, element) {
return false;
},
Also, use the latest version of the plugin file as this will ensure the require_from_group method operates bug-free.
I don't understand why you are using the messages option when you've totally disabled these messages from displaying. You can safely remove messages in this case.
I have small form :
Following is the script where I am validating the required field for input field which is working perfectly now I want to validate url using jquery.validate.min.js.
<script type="text/javascript" >
$(document).ready(function() {
var container = $('#error');
$("#rssform").validate({
errorContainer: container,
errorLabelContainer: $(container),
meta: "validate",
rules: {
feedurl: {
required:true
}
},
messages: {
feedurl: {
required:"Please Enter the URL"
}
}
});
});
</script>
<form action="rssindex.php" method="POST" id="rssform">
<label>Enter the feed URL </label>
<input type="submit" name="submit" value="GO" id="submit"/>
</form>
How can I do this. Any solution?
Thanks
jQuery validate plugin provide method to validate url.
Example:
$("#myform").validate({
rules: {
field: {
required: true,
url: true
}
}
});
For your code, add url: true to the rules.
feedurl: {
required:true,
url: true //here
}