I am using 1000hz BootstrapValidator and after click on button (not submit because I need to stay on page without refresh) I want to check if form is correct.
I just can call $("#form2").validator('validate'); but I am not able to get return value.
I know about isDefaultPrevented but it is called after submit and I do not want submit.
$('#form').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
}
})
Yeah one way is to change the from submit button type from submit to buttonand handle the validation via click function and count the length if any input field has error ($('#form2').validator('validate').has('.has-error').length) and handle it with if/else condition.
$(document).ready(function(){
$("#myButton").click(function() {
if ($('#form2').validator('validate').has('.has-error').length) {
alert('SOMETHING WRONG');
} else {
//$("#form2").submit();
alert('EVERYTHING IS GOOD');
}
});
});
Fiddle Example
Related
I have a bootbox confirm dialog box. In that, I have some form validation.Validation working fine and as long as validation fails confirm dialog box still opens. But when I click on the cancel button, still it is asking for validation.
bootbox.confirm({
closeButton: true,
message: valid_result,
size: 'large',
title: 'Fill fields with related values',
buttons : {
confirm : { label: '<i class="fa fa-check"></i> Validate'}
},
callback: function () {
var res = getLinkupInformation(ids_string)
if(res == true) {
return true;
} else {
return false;
}
}
});
The validation part is working and if validation passed then only modal was closing. But when user click on the cancel button or close icon still it is asking validation. When I remove return false in call back function in else part then the validation button is not working and when I click on the validate button confirmation dialog box was closing.
Please guide me how to solve this issue?
The callback expects you to supply an argument, like so:
callback: function (result) {
}
If the user cancelled the dialog, either by clicking Cancel or the close (x) button, then result (or whatever you called your argument) will be the value false. You would use that value like this:
callback: function (result) {
if(result) {
/* your code here */
}
}
This is more or less covered in the documentation.
I am trying to add some validation logic to the code plugin for tinyMCE.
It seems, however, that when a window's onSubmit function is called, the window closes by default.
The onSubmit function currently looks like this:
onSubmit: function (e) {
// We get a lovely "Wrong document" error in IE 11 if we
// don't move the focus to the editor before creating an undo
editor.focus();
editor.undoManager.transact(function () {
editor.setContent(e.data.code);
});
editor.selection.setCursorLocation();
editor.nodeChanged();
}
What I would like to do is add some validation logic to the plugin to prevent tinyMCE from reformatting invalid html and, rather, display a message that the html is invalid. Essentially, something like this:
onSubmit: function (e) {
// We get a lovely "Wrong document" error in IE 11 if we
// don't move the focus to the editor before creating an undo
var isCodeValid = true;
//check if code valid
isCodeValid = ValidateCode(e.data.code);
if (isCodeValid) {
//if code valid, send to tinyMCE to let it do it's thing
editor.focus();
editor.undoManager.transact(function () {
editor.setContent(e.data.code);
});
editor.selection.setCursorLocation();
editor.nodeChanged();
}
else {
//if code invalid, display error message and keep text editor window open
tinyMCE.activeEditor.windowManager.alert("Your HTML is invalid. Please check your code and try submitting again.");
return;
}
}
However, it seems that the onSubmit function closes the text editor window regardless. I was wondering if there is a way to stop it from doing this. I have scoured the documentation which leaves much to be explained and have looked at other plugins as examples. The closest I can find is the searchandreplce plugin. The 'Find' button calls the onSubmit function, but it seems to stay open if the 'find' text field is blank. However, the logic behind it seems very different from what I can use in the Code plugin as it is.
Can anyone who is familiar with the tinyMCE API give me any ideas on how to prevent the window from closing when onSubmit is called? Or do I have to go another route?
As per this question the way to cancel an event is to return false;. This will keep the popup open. Your code would then become:
onSubmit: function (e) {
// We get a lovely "Wrong document" error in IE 11 if we
// don't move the focus to the editor before creating an undo
var isCodeValid = true;
//check if code valid
isCodeValid = ValidateCode(e.data.code);
if (isCodeValid) {
//if code valid, send to tinyMCE to let it do it's thing
editor.focus();
editor.undoManager.transact(function () {
editor.setContent(e.data.code);
});
editor.selection.setCursorLocation();
editor.nodeChanged();
}
else {
//if code invalid, display error message and keep text editor window open
tinyMCE.activeEditor.windowManager.alert("Your HTML is invalid. Please check your code and try submitting again.");
return false;
}
}
I figured it out finally. All you need to do is add e.preventDefault(); at the start of the onSubmit function and the window will not close. The documentation was no help, but looking at the searchandreplace plugin as an example lead me to the answer. What I have now is like this:
onSubmit: function (e) {
e.preventDefault();
// We get a lovely "Wrong document" error in IE 11 if we
// don't move the focus to the editor before creating an undo
var isCodeValid = true;
//check if code valid
isCodeValid = ValidateCode(e.data.code);
if (isCodeValid) {
//if code valid, send to tinyMCE to let it do it's thing
editor.focus();
editor.undoManager.transact(function () {
editor.setContent(e.data.code);
});
editor.selection.setCursorLocation();
editor.nodeChanged();
}
else {
//if code invalid, display error message and keep text editor window open
tinyMCE.activeEditor.windowManager.alert("Your HTML is invalid. Please check your code and try submitting again.");
return;
}
}
e.PreventDefault() seems to stop the default behavior of the onSubmit function.
The click seems to fire the event and set the cookies but pressing enter to submit doesn't set the cookies and instead the page redirects without the cookies.
function locationAuto() {
$('.search-location').focus(function () {
autocomplete = new google.maps.places.Autocomplete(this);
searchbox = this;
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var thisplace = autocomplete.getPlace();
if (thisplace.geometry.location != null) {
$.cookie.raw = true;
$.cookie('location', searchbox.value, { expires: 1 });
$.cookie('geo', thisplace.geometry.location, { expires: 1 });
}
});
});
The .search-location is a class on multiple textboxes.
There is a submit button that takes the values from the cookies and redirects (server side)
Adapted from Jonathan Caulfield's answer:
$('.search-location').keypress(function(e) {
if (e.which == 13) {
google.maps.event.trigger(autocomplete, 'place_changed');
return false;
}
});
I've encountered this problem as well, and came up with a good solution. In my website I wanted to save the autocomplete.getPlace().formatted_address in a hidden input prior to submission. This worked as expected when clicking the form's submit button, but not when pressing the Enter key on the selection in the autocomplete's dropdown menu. My solution was as follows:
$(document).ready(function() {
// Empty the value on page load
$("#formattedAddress").val("");
// variable to indicate whether or not enter has been pressed on the input
var enterPressedInForm = false;
var input = document.getElementById("inputName");
var options = {
componentRestrictions: {country: 'uk'}
};
autocomplete = new google.maps.places.Autocomplete(input, options);
$("#formName").submit(function(e) {
// Only submit the form if information has been stored in our hidden input
return $("#formattedAddress").val().length > 0;
});
$("#inputName").bind("keypress", function(e) {
if(e.keyCode == 13) {
// Note that simply triggering the 'place_changed' event in here would not suffice, as this would just create an object with the name as typed in the input field, and no other information, as that has still not been retrieved at this point.
// We change this variable to indicate that enter has been pressed in our input field
enterPressedInForm = true;
}
});
// This event seems to fire twice when pressing enter on a search result. The first time getPlace() is undefined, and the next time it has the data. This is why the following logic has been added.
google.maps.event.addListener(autocomplete, 'place_changed', function () {
// If getPlace() is not undefined (so if it exists), store the formatted_address (or whatever data is relevant to you) in the hidden input.
if(autocomplete.getPlace() !== undefined) {
$("#formattedAddress").val(autocomplete.getPlace().formatted_address);
}
// If enter has been pressed, submit the form.
if(enterPressedInForm) {
$("#formName").submit();
}
});
});
This solution seems to work well.
Both of the above responses are good answers for the general question of firing a question when the user presses "enter." However - I ran into a more specific problem when using Google Places Autocomplete, which might have been part of the OP's problem. For the place_changed event to do anything useful, the user needs to have selected one of the autocomplete options. If you just trigger 'place_changed', the if () block is skipped and the cookie isn't set.
There's a very good answer to the second part of the question here:
https://stackoverflow.com/a/11703018/1314762
NOTE: amirnissim's answer, not the chosen answer, is the one to use for reasons you'll run into if you have more than one autocomplete input on the same page.
Maybe not the most user friendly solution but you could use JQuery to disable the enter key press.
Something like this...
$('.search-location').keypress(function(e) {
if (e.which == 13) {
return false;
}
});
I have a multipage form with #p1,#p2,#p3. Once I submit the form, and when I try to click back browser button, it should go to #p1 with empty form fields. it is possible wiith Jquery Mobile?
I would override the backbutton and check for which page is the active page then based on the page do whatever house cleaning you need...
I submitted an example to another question really similar to this:
BackButton Handler
Where I have Options, Popup and HomePage you might just need P3 and when the activePage is equal to P3 clear your form and show P1.
function pageinit() {
document.addEventListener("deviceready", deviceInfo, true);
}
function deviceInfo() {
document.addEventListener("backbutton", onBackButton, true);
}
function onBackButton(e) {
try{
var activePage = $.mobile.activePage.attr('id');
if(activePage == 'P3'){
clearForm(); // <-- Calls your function to clear the form...
window.location.href='index.html#P1';
} else if(activePage == 'P1'){
function checkButtonSelection(iValue){
if (iValue == 2){
navigator.app.exitApp();
}
}
e.preventDefault();
navigator.notification.confirm(
"Are you sure you want to EXIT the program?",
checkButtonSelection,
'EXIT APP:',
'Cancel,OK');
} else {
navigator.app.backHistory();
}
} catch(e){ console.log('Exception: '+e,3); }
}
I am a jQuery newbie and ma trying to use a modal to reveal a constant contact simple form generated by the form generator. I have applied jQuery.validate(), and the validation is working, but I don't know how to submit the form. If there is an action="signup/index.php" in the tag, i land on a new page.
The generated form uses action='signup/index.php' and this file calls for a new page location see file in Github. I commented those last lines out, but still am failing to make the form submit. I cannot see the new email in the Constant Contact email list.
This is my sumbmit handler
submitHandler: function() {
$('#signup').click(function(e) {
$.post('signup/index.php', $().serialize(), function(data) {
$('#output-div').html(data);
});
$('#form-message').fadeIn(300, function() {
$('#form-message').html('<p>Thank you for joining our list. Great offers coming soon.</p>')
});
$('#myModal').delay(1500).trigger('reveal:close');
});
}
solved it.
I had commented out the last several lines of the signup/index.php, including this line
if($postFields['request_type'] == 'ajax'){ $postFields["success_url"]=''; $postFields["failure_url"]=''; }
For some reason, that line is needed for form submittal success. Everything after that line is commented out, from
if ($return_code==201) {
to
</ol>
</p>'; }
}
and my jQuery is handling messages, errors and completion as such
submitHandler: function() {
$.post('/dev/rest/ccphp/signup/index.php', $("#ccsfg").serialize(), function(data) {
$('#results').html(data);
}).success(function() {
$('#ccsfg').html('<h4>Thank you for joining our list. Great offers coming soon.</h4>');
})
.error(function() {
$('#ccsfg').html('<h4>Oops! There was an error. Please try again. </h4>');
})
.complete(function() {
$('#myModal').delay(1500).trigger('reveal:close');
});
}