I am encountering similar behaviour in my code: https://codepen.io/iw3/pen/BAdIq
html
<input id="open" type="button" value="Open" />
<div id="dialog">
<form id="form">
<input type="text" name="field" />
</form>
</div>
JS
$(function () {
$('#dialog').dialog({
autoOpen: false,
buttons: {
'Send': function() {
if ($('#form').valid()) {
alert('Success');
$('#dialog').dialog('close');
}
}
}
});
$('#open').on('click', function() {
$('#dialog').dialog('open');
});
$('#form').validate({
rules: {
field: {
required: true,
digits: true,
maxlength: 9,
min: 1
}
}
});
});
When the user enters data in the form and gets an error, then closes the form and reopens it, the validate messages in red remain while they should really be cleared. Is this an intended behavior or is there a way to reset the validate?
To fix this you can simply hide the validation error label elements when the dialog is closed:
$('#dialog').dialog({
autoOpen: false,
close: function() {
$('label.error').hide();
},
// other configuration settings...
});
Alternatively you can save a reference to the validator and call resetForm() on it when the dialog is closed:
let validator = $('#form').validate({
rules: {
// your rules...
}
});
$('#dialog').dialog({
autoOpen: false,
close: function() {
validator.resetForm();
},
// other configuration settings...
});
Related
i am displaying html form inside jqueryui dialog and i am using jquery validation plugin to validate it.
Problem - when i submit form by changing content to original, default form action is running.
It is only happening if i change html content to original content before form closing.
Here is my code:
$(document).ready(function() {
var getOldForm = $("#send-pm-win").html();
$("#pmLink").click(function() {
$("#send-pm-win").dialog({
modal: true,
draggable: false,
resizable: false,
autoOpen: true,
buttons: [{
text: "Cancel",
click: function() {
$(this).dialog("close");
},
style: "outline: none;"
}],
close: function(event, ui) {
$("#send-pm-win").html(getOldForm);
$(this).dialog("destroy");
}
});
});
});
I was trying to exclude one field for jquery validation but the problem is I encountered such terrible error. My two questions are how exclude one field for JQuery validator and how to fix the Uncaught TypeError: Cannot read property 'settings' of undefined error?
I am using this line of code: $('#datepicker').rules('remove', 'required'); because I want to exclude it for validation.
Here's my html code:
<tr>
<td>Product Code: <br>
<input disabled type="text" name="product_code_txt" id="product_code_addQty" required /></td>
<td>Date Purchased: <br>
<input type="date" name="date_txt" id="datepicker" class="date_addQty" required /></td>
</tr>
Here's my Jquery code:
<script>
$(function() {
$('.addQty_link').click(function(){
var idnum = $(this).attr("value");
//alert(idnum);
addQuantity(idnum);
function addQuantity(idnum){
var addQty_dialog_form, formAddQty;
var rules = { txtName: { required: true } };
var messages = { txtName: { required: "Please enter name" } };
$('#datepicker').rules('remove', 'required'); // not working and it has an error
$("#addQty-entry-form").validate({
rules: rules,
messages: messages
});
addQty_dialog_form=$('#dialog-addQty-form').dialog({
resizable: false,
hide: 'fade',
autoOpen: false,
width:440,
minheight:350,
modal: true,
open: function(event, ui) {
$(this).dialog('widget').position({ my: 'top', at: 'top+120', of: window });
},
buttons: {
"Update": function() {
var reg=$("#addQty-entry-form").valid();
if(reg==false){
$('#addQty-entry-form .submit').click();
}
else if(reg==true){}
},
Cancel: function() {
addQty_dialog_form.dialog('close');
}
},
close: function() {
//formEdit[0].resetForm();
$("#addQty-entry-form").trigger("reset");
var validator = $( "#addQty-entry-form" ).validate();
validator.resetForm();
}
}).css('overflow','hidden');
addQty_dialog_form.dialog('open');
formAddQty = addQty_dialog_form.find( "form" ).on( "submit", function( event ) {
event.preventDefault();
// addUser();
});
return false;
}
});
});
</script>
Just add ignore
$("#addQty-entry-form").validate({
rules: rules,
ignore: '#date_addQty'
});
I have a few forms live. My forms use jQuery validator for the front-end. I have a method in place right now that switches out my submit button with a loading gif. The issue is that when the validations aren't met the gif continues, not giving the user the chance to resubmit the form. I've included some of my code below, any help as appreciated.
HTML
<div id="subbuttonfirst">
<button onclick="anothermethod.local.submit(this.form); ButtonClicked();" class="action submit btn btn-success" >Submit</button>
JS (Replacing function)
<script type="text/javascript">
function ButtonClicked()
{
document.getElementById("subbuttonfirst").style.display = "none"; // to undisplay
document.getElementById("loadbutton").style.display = ""; // to display
return true;
}
var FirstLoading = true;
function RestoreSubmitButton()
{
if( FirstLoading )
{
FirstLoading = false;
return;
}
document.getElementById("subbottonfirst").style.display = ""; // to display
document.getElementById("loadbutton").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;
</script>
jQuery Validations:
$('.form').validate({ // initialize plugin
// ignore:":not(:visible)",
rules: {
randomone: {
required: true,
number: true,
},
random: {
required: true,
number: false,
},
}
});
Take a look to the options in the plugin documentation: http://jqueryvalidation.org/validate the invalidHandler option is what you are looking for.
You coul'd try something like this:
$('.form').validate({ // initialize plugin
// ignore:":not(:visible)",
rules: {
randomone: {
required: true,
number: true,
},
random: {
required: true,
number: false,
}
},
invalidHandler: function(event, validator) {
RestoreSubmitButton();
}
});
EDIT - A working example
The form:
<form class='form' action="?" method="post">
<input name="randomone" id="randomone" type="text" />
<input name="random" id="random" type="text"/>
<div id="subbuttonfirst">
<button class="action submit btn btn-success" >Submit</button>
<div class="loadbutton">
loading
</div>
</div>
</form>
The js code
$('.form').validate({ // initialize plugin
// ignore:":not(:visible)",
rules: {
randomone: {
required: true,
number: true,
},
random: {
required: true,
number: false,
}
},
submitHandler: function(){
$(".submit").hide();
$(".loadbutton").show();
},
invalidHandler: function(){
$(".submit").show();
$(".loadbutton").hide();
}
});
A working fiddle
Using invalidHandler with a callback that replaces the gif with the button.
I have a form like this:
<form action="confirm-and-send.php" method="post" onsubmit="return(confirmation());">
<input a lot of input fields here>
<button type="submit" name="confirm_and_send" id="submit-button" class="sent-to-client-bttn" style="margin-left:630px;margin-top: -125px;"></button>
</form>
then I have jquery ui function
function confirmation(){
$("#some-div").dialog({
bgiframe: true,
autoOpen: false,
minHeight: 200,
width: 350,
modal: true,
closeOnEscape: false,
draggable: false,
resizable: false,
buttons: {
'Yes': function(){
$(this).dialog('close');
callback(true);
},
'No': function(){
$(this).dialog('close');
callback(false);
}
}
});
}
function callback(value){
//do something
}
I am following what they say here and here, but it didn't work for me. If I put event.preventDefault() the yes button will not submit the for; if I don't put it submits the form before i choose any of the two options. Any can give me a proper example?
Take your button outside of the form.
<form action="" method="post" id="my_form" onsubmit="">
<input type="text" name="x"/>
</form>
<button name="confirm_and_send" id="submit-button" value="Submit" class="sent-to-client-bttn" onclick="confirmation();">Submit</button>
<div id="some-div" style="display:none">Hi</div>
function confirmation(){
$("#some-div").dialog({
bgiframe: true,
minHeight: 200,
width: 350,
modal: true,
closeOnEscape: false,
draggable: false,
resizable: false,
buttons: {
'Yes': function(){
$(this).dialog('close');
callback(true);
},
'No': function(){
$(this).dialog('close');
callback(false);
}
}
});
}
function callback(value){
alert(value);
}
i think you are using JqueryUi dialogue box.. it will not work.. for this purpose you have to use this
i explain you what happens when u click ..
it will not stop for ur click .. it will automatically submitted... so u have to try default..browser confirmation
I know the correct way to manage JQuery.dialog is to initialize with:
$("#dialog").dialog({ autoOpen: false });
Then use the following to open and close it:
$("#dialog").dialog("open");
$("#dialog").dialog("close");
But there are some cases when this model is not fully applicable.
For instance, I use a dialog to create new data and to edit existing data. In the first case I have a cancel and a create button, but in the second case I have also a delete button.
I've seen that there is a destroy function in jquery.dialog. The question is: in these cases, should I destroy the dialog instead of close it and create a new one? There is any better option?
jQuery UI dialog allows you to manipulate most properties after initialization. You can change the buttons some time after the dialog is initialized; e.g. when the insert or update button is clicked.
// imported from http://jsfiddle.net/salman/VYAJw/9/
$(function() {
$("#dialog1").dialog({
autoOpen: false,
modal: true
});
$("#button-insert").click(function() {
$("#dialog1").dialog("option", "title", 'Insert Record');
$("#dialog1").dialog("option", "buttons", [{
text: "Insert",
click: function() {
alert("Record inserted");
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function() {
$(this).dialog("close");
}
}]);
$("#dialog1").dialog("open");
});
$("#button-update").click(function() {
$("#dialog1").dialog("option", "title", 'Update Record');
$("#dialog1").dialog("option", "buttons", [{
text: "Update",
click: function() {
alert("Record updated");
$(this).dialog("close");
}
}, {
text: "Delete",
click: function() {
alert("Record deleted");
$(this).dialog("close");
}
}, {
text: "Cancel",
click: function() {
$(this).dialog("close");
}
}]);
$("#dialog1").dialog("open");
});
});
#import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");
body {
font: medium sans-serif;
}
#dialog1 label,
#dialog1 input {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="dialog1">
<p>Fill out this form.</p>
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
</form>
</div>
<input type="button" id="button-insert" value="Insert" />
<input type="button" id="button-update" value="Update" />
An alternate method would be to add the buttons directly inside the form and .hide() them depending on whether you're showing insert or update dialog.
you can set different buttons as option before dialog open
e.g.
var buttons = {
"act_add": {
"Insert": function() { ... },
"Cancel": function() { ... }
},
"act_edit": {
"Save": function() { ... },
"Delete": function() { ... }
}
};
$('.dialogOpenLink').click(function(){
var $dlg = $('#dialog'),
actType;
//get an action name from data attribute of the clicked element
actType = $(this).data('action'); //or get the action in way that best suits you
$dlg.dialog( "option", "buttons", buttons[actType]);
$dlg.dialog('open');
});
To safelly remove dialog all you need is to set close option like this:
close: function() {
return $(this).remove();
}