We Keep Coding

jQuery validate select box with focusCleanup

I am using jquery validate plugin to validate my form. So when a user clicks on submit button it validates the form.
Now if user clicks on any form element the error should be cleared until user leaves the input.
So from plugin documentation I know that focusCleanup is exactly what I am looking for.It works for all elements except drop downs.
Fix that work for all element but drop-downs
http://jsfiddle.net/paraselixir/sw87W/259/
To fix this I have tried following settings for validation plugin
settings = {
// global form validator settings
errorClass : 'error',
errorElement : 'span',
onkeyup : false,
.
.
focusCleanup : true,
onclick:false,
.
.
.
}
Reference: https://forum.jquery.com/topic/jquery-validate-select-box-with-focuscleanup
This solution has fixed the issue for dropdowns but now same issue is happening on checkboxes.
Fix that works for drop-downs but not for checkboxes
Fiddle Example :http://jsfiddle.net/sw87W/257/
So I need a solution that works for all elements.

After submitting the form when you click on these elements, in jsfiddle.net/sw87W/257 error message hides when you click on select box
Apparently, the onclick option also disables the select. However, if you need the onclick: false option for the checkbox, then you'll need to write another handler for the select element...
$('[name="numbers"]').on('click', function() {
$(this).valid();
});
DEMO: http://jsfiddle.net/d83oaa3v/

datepicker not working with jQuery dialog box

I have datattable of user data, and each row contain edit button to open edit form. I'm open it using jQuery dialog box and submit for using ajax submit, but when loading form datepickers it is not working.
How can I fix this?

You are inverting name and id attributes.
When you use:
$("#activation_on").datepicker(...
jQuery selects the element with id= activation_on because # is the id selector. But your element's id is id="activation_on1".
The same happens on your valid_to field.
You can change their ids or change the jquery to:
$("#activation_on1").datepicker(...
and
$("#valid_to1").datepicker(...
Take a look at a working example on JSFiddle: https://jsfiddle.net/dudu84/42yoLLgg/2/

show form and content in "verification" modal

I would like to present a user with the form that they just filled out in a modal that pops up after they click "submit" for verification. I see this as a carbon copy of the form, but with each field disabled or grayed out so they can look it over and confirm that everything is right. To make changes to the form at this stage would require that they cancel out of the modal and would be taken back to their form.
I am having trouble getting the data that is contained within the form. Is there an easy way to do this with jQuery or JavaScript?
Or is there another strategy for allowing the user to look over what they just changed that I am missing/forgetting?

You can display a clone version of the form in the modal:
var $clonedForm = $('#myformid').clone();
$('input, select, textarea', $clonedForm).attr('disabled', 'disabled');
$clonedForm.appendTo('#modalid');

Prevent user from submit button click

I have got one Kendo UI dropdown box and combobox both are cascading and loading items from DB... and then few more textbox controls and then submit button also....
I made required validation for two textboxes and dropdownList and we can edit items that we are selected in combobox(we can remove also). Some times user clicks the submit button with out properly loading the items in Combobox then I am getting error like Required validation error ....
Is there any way to prevent the user from button click until the all the controls are fully loaded ...
I tried two ways ..
Approach 1 : i have put button property as hidden and then in combobox Databound event made visible the button ... But this approach didn't work..
Approach 2 :
I have tried the suggestions given in this link
$("#submit").prop("disabled", false)
this approach didn't worked for me..
Is there any other approach to prevent user from clicking the submit button until all controls are loaded...
Many thanks in advance...

You can do this:
<input type='submit' id='submit' value='submit' disabled />
<!--disable the button on default-->
and add this js:
$(window).load(function(){
$("#submit").prop("disabled", false); // enable it when page loaded.
});
this solution requires jquery.

On some projects i've used the css visibility property to hide show elements at appropriate times:
http://www.w3schools.com/css/css_display_visibility.asp
This might be what you want.

A display:none style until validation doesn't work for you?
$("#submit").css("display", none)
or
$("#submit").hide()

display values after submission

i have a form in html with two submit buttons either one is enabled. if user is filling the form submit is enabled and the other button is diasbled.
when user clicks submit button other button gets enabled and displays all the field values with read only .when the 2nd button is clicked values are enterd in databse, using jquery or javascript
is it possible
$('input[type="text"]').each(function(){
$(this).attr('readonly','readonly');
});

If I read your question correctly, the first button does not actually submit the form?
$("#firstbutton").click(function() {
$("#myForm input").attr("readonly", "readonly"); //this makes the input fields readonly
$("#secondbutton").attr("disabled","disabled"; //this enable the second button
$(this).removeAttr('disabled'); //this disables the #firstbutton
}
Make sure that:
On page load, the second button is already disabled.
If you have dropdownlists in your form, you'll have to set those readonly as well, as they are not <input> but <select> items.
the firstbutton should not be of type="submit", it should either be of type="button" or be a <button> tag instead.
Your secondbutton can be a regular submit button, nothing fancy required. As long as your form posts to the correct actionlink, the form will be submitted fine.
Never use disabled attribute on your input fields. If you do, the form submit will ignore these fields and not post them as intended. You're already doing it right by using readonly.

$(document).ready(function(){
$('#myForm').submit(function(e){
e.preventDefault();
$myForm = $(this);
$myForm.find('input[type=submit]').attr('disabled','disabled');
$myForm.find('input#other-button').attr('enabled','enabled');
//do a $.post request
$.post('/path/to/my-file.php',
$myForm.serialize(),
function(data){
// make something after the post is complete
$myForm.find("input[type=text]").attr('readonly','readonly');
},
'json');
});
});