We Keep Coding

All buttons trigger form validation semantic ui

In my semantic UI form (<div class="ui form">) it appears every button triggers the form validation, even if it is not a submit button.
Two different kind of buttons below:
<button class="ui blue right labeled icon primary submit button">
<i class="right arrow icon"></i>
Submit
</button>
and
<button class="ui blue button">
Something Else
</button>
both of these are inside the semnatic UI form element. both trigger my validation rules (standard setup rules) :
$('.ui.form')
.form({
fields: {
example:: {
identifier: 'example',
rules: [
{
type : 'empty',
prompt : 'Please enter at least one thing'
}
]
}
}
}
)
;
Only "Solution" I could find online was creating a button like this:
<input type="button" class="ui blue button">
Test
</input>
but this doesn't put the text ("test") inside the button, also couldnt get the size of the button to be same as other ones.
Is there a way to get it to not trigger my validation? Pretty stumped on why a non submit button is doing it.

Simply define the type of the button. Default type is submit:
<Button type="button" />
Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes

I was able to implement this in a different way, as the button type=button control while ignoring the validations, did not submit, and if I did submit manually the default event handler of semanticui would intervene and show the validation errors.
My use case two buttons, one a save draft and the other a finalize (final save). The first one had to save the data as is, without triggering the validations, while the other would trigger validations and then save.
I am also implementing all the validators using data attributes that I custom implemented for this project, hence the form validator is inside a JS file.
In my form validation's failure method, I included a delegate function which I could set on my page and depending on which button clicked it, then be able to return true or false.
My form validator inside a JS file
$('.ui.form').form({
inline: true,
on: 'submit',
fields: formFields,
transition: 'fade',
keyboardShortcuts: false,
onFailure: function () {
var returnValue = false; //Default to false, since validations failed
//If the delegate is present, fire it to evaluate
if (typeof window.delegValidate == 'function') {
returnValue = window.delegValidate();
}
//Ignore the toast if the delegate evaluated to TRUE
if (!returnValue) {
$('body')
.toast({
title: 'Unable to save',
message: 'Please enter all required field data before saving.',
classProgress: 'red',
showProgress: 'top',
progressUp: true,
position: 'bottom right',
showIcon: 'red exclamation triangle'
});
}
return returnValue; // false is required if you don't want to let it submit
}
});
and on my page I attached a function to the window, since my form validation is inside a JS file.
Page function
//For all postback buttons, save the id value in a hidden field for use in the delegate
$('.postbackButton').bind('click', function (e) {
$('#ButtonClicked').val(this.id); // a hidden field on the page
});
//setting the delegate for use in the form validations
window.delegValidate = function () {
//For the save button, just ignore the validations and return true
//This in turn is invoked by the failure method of the form validation that is
//dynamically attached to the page, and hence this return value is respected
//over the false that is otherwise sent back for when we want to interrupt the page
//since there are errors normally.
if ($('#ButtonClicked').val() == 'Save')
return true;
else // if value is finalize, let it return false
return false;
}
For other pages where I don't want this functionality, I can simply not write the delegate method and the default validation fires as expected on the submit button.
Hope this helps someone still looking for a way to do this. :)

How to pass button into Jquery function?

I'm using a third party jQuery library called jQquery.confirm. It provides dialogs in jQuery. Upon clicking a button of a particular class I want to use the confirm() function in order to bring up the confirmation:
$(".btn-danger").click(function(event) {
//Prevent the button from being clicked.
event.preventDefault();
$.confirm({
text: "Are you sure you want to delete that comment?",
confirm: function() {
//Code in here for button to be pressed
}
});
});
The issue I'm having is with the confirm: function(). I'd like to simply simulate clicking the button here. I've tried this but it doesn't seem to recognize the button that I need to click:
$(this).trigger("click");
I'm guessing I need to pass it as an argument somewhere?

Within the confirm handler function the scope of this will not refer to the button that was clicked. To fix this you need to store a reference to the clicked button in a variable outside of the confirm handler.
Note however that the logic you're creating will end up in a loop; you're clicking the button, showing the confirm then clicking the button again programmatically which will just show the confirm again and so on ad infinitum. I'd suggest you call a function to do what's needed in the confirm action, like this:
Try this:
$(".btn-danger").click(function(e) {
e.preventDefault();
$.confirm({
text: "Are you sure you want to delete that comment?",
confirm: function() {
actionWasConfirmed();
}
});
});
var actionWasConfirmed = function() {
console.log('do something here...');
};

HTML Code for your button:
<button class="btn-danger" >Delete</button>
And
Javascript function
$(".btn-danger").click(function(){
if(confirm("Are you sure you want to delete that comment?")){
//Code in here for button to be pressed
}
});

Every event callback function receives a reference to the event that triggered it. You are already set up to get that reference with your event argument. Through that object, you can reference the object that triggered the event (which would the button in your case). So, you could just do this:
$(".btn-danger").click(function(event) {
//Prevent the button from being clicked.
event.preventDefault();
$.confirm({
text: "Are you sure you want to delete that comment?",
confirm: function() {
event.target.trigger("click")"
}
});
});
But, as has been pointed out, a click of the button would cause another click of the button upon confirmation.
Since you just want to delete something upon confirmation, the better approach would be to just delete the entry. In other words, separate your logic. The button click should trigger the confirm and the confirmation should delete the entry, not click the button again.
$(".btn-danger").click(function(event) {
//Prevent the button from being clicked.
event.preventDefault();
$.confirm({
text: "Are you sure you want to delete that comment?",
confirm: function() {
// Delete the comment here, don't click more buttons.
}
});
});

This is an example that uses SweetAlert, which is a replacement for Javascript built-in alert popup. If you have not checked out SweetAlert before, I highly recommend you do. It also integrates very well with Bootstrap.
Here is a working example (you may want to go full-screen for the full effect). Unfortunately, you will not be able to see the actual submit working, but the code should work once you add a real action.
$("form.confirm").find("[type=submit]").click(function(e) {
var $this;
e.preventDefault();
$this = $(this);
return sweetAlert({
title: "Are you sure?",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Confirm Delete",
closeOnConfirm: false
}, function() {
return $this.closest("form").submit();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="confirm" method="POST" action"">
<button type="submit">Submit</button>
</form>

When you use $(this) you have to make sure you use it in the correct object. You can't use $(this) inside $(confirm) and expect to reference your $(".btn-danger"). Instead it will reference to $(confirm) instead of your targeted button.
Take a look at the working example bellow and ask if anything unclear.
$(".btn-danger").click(function(e) {
e.preventDefault();
// Here $(this) references the object you need clicked
var currentButton = $(this);
$.confirm({
text: "Are you sure you want to delete that comment?",
confirm: function() {
// If you used $(this) here you referenced to your $(confirm) object
// Instead of a false $(this), use the button that actually triggered this code.
currentButton.trigger('click');
}
});
});
I am not sure if this is what you wanted to do, but please consider the code above is kind of an infinite loop, because when the click is triggered, this whole code will be called again.
Therefore if you wanted to press a different button, use the full selector of it, or assign him an unique ID and select it, as bellow:
HTML code of targeted button:
<input type="button" value="Button To Be Clicked after Confirm" name="myButton" id="uniqueID_onWholePage" />
Updated jQuery code that presses on this button
$(".btn-danger").click(function(e) {
e.preventDefault();
$.confirm({
text: "Are you sure you want to delete that comment?",
confirm: function() {
$('#uniqueID_onWholePage').trigger('click');
}
});
});

Prevent Multiple Submissions with JQuery Prompt Save Button

I have a save button that triggers a jquery prompt (click the save button, and then I prompt the user: "Are you sure you want to save updates?" The problem is that a user can click the prompt multiple times, causing the same data to save multiple times. How can I disable the prompt save button on the first click?
I am using knockout js. Here is the code in my viewmodel:
$.prompt("Are you sure you want to save? You will not be able to change your decision after it's been saved.", {
title: "Save?",
buttons: { "Save": true, "Cancel": false },
submit: function (e, v, m, f) {
if (v) {
e.disabled = true;
response = saveUpdates(LoanDetails);
}
}
}
});

You can disable the button after saving data for the first time. You can use different jquery selector for your button.
$('button[type=submit], input[type=submit]').attr('disabled',true);

Try disabling the button itself when you do the save. Then the button
wont be clickable and you wont get the prompt.

If you want to disable a button using jQuery, you should have a look at $('#elem').prop(property,value), which will allow you to do something like this...
$("input").prop("disabled",true);

Prevent text field from blurring on button click

Let's say I have a field and a button. The button submits the field and triggers some AJAX request which returns data to the same page. Every time the button is clicked, the field is deselected/blurred. This can be partially fixed by making the button focus the text field upon its click. However, during the click, there is a brief moment where the field blurs. The way I have my page set up this does not look good. I would like to completely prevent the field from blurring throughout the click. What is the easiest way to do this? Thanks!
Code:
<input type="text" id="f" autofocus/><span id="btn" onclick="document.getElementById('f').focus()"></span>

Instead of handling button click you can move the focus on button focus with a very small timeout:
jQuery:
$('#btn').focus(function (event) {
setTimeout(function () {
$('#f').focus();
}, 5);
});
JavaScript:
document.getElementById('btn').onfocus = function (event) {
setTimeout(function (event) {
document.getElementById('f').focus();
}, 5);
};

Why does jQuery "toggle" button trigger the Submit button on a form?

I have built a fairly complex form which includes a hidden section that the user can toggle open for entering more information if necessary. However, when you click on this toggle button labeled I have more Nativities, it triggers the submit button and prematurely submits the form.
The form is in dev right now, but it can be found here.
The code I am using for the toggle button is:
<script type="text/javascript">
$(function() {
$("#schedule").accordion({ header: "h5", collapsible: true });
$("#more-nativities").hide();
$("#toggle").click(function() {
$("#more-nativities").slideToggle("slow");
});
});
</script>
The code for the submit button is pretty basic:
<input id="submit2" type="image" src="_images/btn_register.jpg" name="submit" alt="" onmouseover="javascript:this.src='_images/btn_register2.jpg'" onmouseout="javascript:this.src='_images/btn_register.jpg'"/>
The code for the toggle button is:
<button id="toggle">I have more nativities</button>
Any ideas as to why the toggle button is triggering the submit? And more importantly how to solve the problem?
Thanks!

Try adding a type, i.e.:
<button type="button" id="#toggle">Text</button>
http://www.w3schools.com/tags/tag_button.asp says this should be always defined. It's possible the browser is defaulting to a submit button.

Esteban has one solution. A better one is described in the jQuery tutorial:
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
});

Try
return false;
after the slide toggle on the click function fro the toggle button.

From W3Schools:
Always specify the type attribute for
the button. The default type for
Internet Explorer is "button", while
in other browsers (and in the W3C
specification) it is "submit".
http://www.w3schools.com/tags/tag_button.asp
Be sure to specify type="button"