Im designing a user control that has the following:
a textbox called 'AddressInput'
a google maps plugin
a linkbutton
a textbox for the marker title called 'MarkerTitleInput'
a "Submit" button
The problem is this:
When the linkbutton is clicked, I need to validate that AddressInput was completed, but nothing else
When the submit button is clicked, I need to validate that AddressInput and MarkerTitleInput were both completed.
So my first two problems are:
1) How do i validate certain fields from a linkbutton, without submitting the form
2) How do i validate all fields from the form being submitted
My other problem is that when the linkbutton is clicked, my code runs a lookup against Google's Geocode to get an address. I was going to create an additional validation method to handle when an address is not found, but using a validator means the json request is sent everytime a key is pressed, which is too much - i only want the validation to run when the linkbutton is clicked. I have tried (selector).validate({ onkeyup:false }) with no avail. Is it perhaps possible to manually set whether the .valid() method thinks the form is valid?
Thanks
Al
$("form").validate({
groups:{
pg1:"_Phone1 _Phone2 _Phone3",
pg2:"dob_month dob_day dob_year"
},
errorPlacement:function(error, element){
if(element.attr("name")=="_Phone1"|| element.attr("name")=="_Phone2" || element.attr("name")=="_Phone3"){
error.insertAfter("#_Phone3")
}
else if
(element.attr("name")=="dob_month"|| element.attr("name")=="dob_day" || element.attr("name")=="dob_year"){
error.insertAfter("#dob_year")
}
else
error.insertAfter(element);
},
});
});
Give each of the two buttons a unique class (for ease of targeting in jQuery).
Give each class an OnClick event.
Validate in the OnClick event.
If the validation succeeds, return true.
Else return false.
Related
I have a send Button, that contains 2 Api in it.
So, if the input box is empty then send the button is disabled.
Now i want 2 conditions to work,
1. if i get an error message from the response saying
Email-Id you provided is not exist in medicamind account,
then my send button must be disabled untill Correct email is given.
After giving Email-Id and click on save button, it must get disabled after one click.
If i edit again on input box then it must be enabled or it must be in disabled state.
Use the attr disabled of the button :. If you get an error put it to true and when the correct one is received put it to false.
For the second case just put (click)="generateEmailOtp(enterSms,enterEmail); booleanVar = false" must be enought. I hope it could help you!
You can have multiple events, I think you know it. So you need to validate two things:
1- Validate Email;
2- OnClick you call your method which returns something but once it's clicked you need to disable it again.
You can validate email as the user's type, since you are using template driven form you use keyup event to validate your email using regex. Like this:
<!-- HTML File -->
<input
type="text"
[(ngModel)]="inputData"
(keyup)="keyUpMethod()" >
<button
[disabled]="checkBtn"
(click)="apiCallMethod()">
// .ts File
inputData: string; // input Data
checkBtn: boolean = false; // Declare it initially as false
// This method fires when the user types
keyUpMethod() {
if (this.validateEmail(this.inputData)) {
this.inputData = true; // this enables your button
} else {
// if you want to add any exception, it goes here
}
}
// for validation of email
validateEmail(email) {
// validate your email here
return either true or false;
}
// this is will trigger when the user clicks on the button
apiCallMethod() {
this.inputData = false; // Disable the button again
// your button is disabled and you are already in this method, now you can do the
// other stuff here
}
I have a jquery bug that I cant solve - hoping for help with a solution. Dont know if it is browser bug related (probably not), jQuery related, or Yii (our backend) related - but I need to try to solve it with the jQuery portion. Code at bottom of message.
Requirement: Disable accidental double submissions on forms.
Current Solution: Check for form submission state through a delegate and when the DOM form state changes to submit - append the disable attribute to the form submit button to prevent accident double form submission.
jQuery double click disabler:
$( document ).ready(function() {
$('html').delegate('form', 'submit', function() {
$(this).find(':submit').attr('disabled', true);
});
});
Problem: This works perfectly on every part of the CRM we are developing EXCEPT for a single timekeeper (clock in/clock out) feature. With the timekeeper the form has two submit buttons (one for clock in, one for clock out). Only one submit button shows at a time (Either "In" or "Out". When you click the button - it submits the form and changes the submit button to the other state by checking a session var to determine what state it is in and determines which of the two submit buttons are to be displayed. Problem is if you click it, the form appears to submit, but the state don't change. If you click it really fast a few times you can get it to change state. I suspect this is a timing or order of operations issue, but I have no idea how to fix it. The fix MUST be done on the front end, so here is the code (both the PHP being impacted and jQuery double click prevention). Perhaps a different method of disabling double submissions may work, please post your solution if you have one to try. Commenting out the current jQuery allows the form to function as designed. What might be causing this, and how might I change the jQuery double click prevention to solve it?
On page PHP for the time clock:
<form action = "<?=$clockUrl?>" method = "post" >
<input type = "hidden" name = "previousUrl" value = "<?=$currentUrl?>">
<?php if ($sessionVar->timeclockin) {?>
<input type = "submit" name = "submit-clockout" value = "Out">
<class="clock-time" ><?=$sessionVar->timeclockin?></class="clock-time">
<?php } else {?>
<input type = "submit" name = "submit-clockin" value = "In">
<?php }?>
</form>
Thank you for pointing me in the right direction Tyler! I was able to fix the issue with the following alteration to my script.
function do_nothing() {
console.log("click prevented");
return false;
}
$('html').delegate('form', 'submit', function(e) {
$(e.target).find(':submit').click(do_nothing);
setTimeout(function(){
$(e.target).unbind('click', do_nothing);
}, 10000);
});
Update 1:
If you are looking to prevent the button from being pressed twice then inside of your onclick or submit function, you should use something similar to the following:
$('#yourButton').prop('disabled', true);
If the page then redirects then you won't have to undo this. If it does, then do the opposite by changing true to false.
The submit function should instead disable the submit button until it either returns or fails.
An alternative is to use a lambda style function and replace it temporarily with an empty function until the request returns or fails.
In jsp , clicking on button called sumbitForm() function as below
document.Data.formSubmit.value="Yes";
document.Data.action.value='SUMBIT';
document.Data.submit();
here giving proper result and setting value as occured on controller
In same JSP, calling onload function ,In that checking if command class variable set = occured then only confirmation box can show and after clicking yes button of confirmation box then request should process.. I used document.Data.submit() but its not working and not giving exception.
i think this will help you
if(confirm("Are you sure you want to submit the form ") == true ){
// then submit the form
}
Is there a way to disable/submit the form submit button if the form has validation errors in such a way that the user can click it only if the form is valid.
I'm using unobtrusive validation with "remote" attribute validation with ASP.Net MVC 4 and razor.
Thanks and best regards
Depends on where you are doing your validation. If you are doing it server side with jquery you can add e.preventDefault to the check if it is invalid and the button click won't fire until your conditions are met. If you are doing server side validation using attributes then you can check model state like
if (ModelState.IsValid){
}else{
}
and if the model state is valid (the data passes all the checks) run one set of code. If the model state is invalid then just return view to go back to where you started and pass a message with whatever failed for the user. Hopefully this helps.
Update:
just saw the edit on your comment. For an ajax call you will want to use prevent default.
$('.SubmitButton').on('click', function(e){
$.ajax({
//your call
success: function(result){
if(result.false){
e.preventDefault();
alert(result.message);
}
}
});
});
so if the call is successful the submit call will go through. If it is false then jquery will stop the button click and you can then display a message or do something else.
I would like to know, is it possible to cancel the next JavaScript event in the queue from another event?
Problem:
I have two ASP.Net controls,
Age - TextBox
Save - Button
There are two JavaScript validation functions,
ValidateAge() - checks for Valid age (0 >= Age <= 140), provides an alert if invalid
ValidatePage() - checks for all the required fields in the page and saves if all the required fields are filled in
<asp:TextBox ID="txtAge" TabIndex="1" DataType = "String" runat="server" MaxLength="50" CssClass="textBox" Style="width: 150px" CausesValidation="true" onblur="return ValidateAge();"></asp:TextBox>
and there is an access key defined for button,
<asp:Button ID="btnSave" AccessKey="S" AssociatedControlID="btnSave" TabIndex="1" runat="server" CssClass="ButtonSaveNew" onclick="return ValidatePage();"></asp:Button>
Now if I press Alt+S with an invalid age in the Age field first the onblur of Age gets called (as I have set the AssociatedControlID) and then the onclickof the save button is called.
Now what happens is that irrespective of the age is valid or invalid the save gets executed.
I need to cancel the onclick event of button from the onblur event of the textbox, if the age is not valid.
What is probably happening is that your form is submitting, and thus the button isn't actually firing the onclick event (since it's not being clicked as such!). You'll likely notice the same behaviour if you hit enter within one of the form fields (even with the txtAge field!), as this also causes a form submit.
The easiest thing to do in this case is register the ValidatePage function as a handler for the submit event on the form:
<form onsubmit="ValidatePage()">
Though i appreciate you're using WebForms and thus it's likely this will be difficult. Whenever i've done client-side validation in WebForms I've always relied on the jQuery.validation plugin. If you're already reliant on jQuery this provides a very neat model to do validation. It doesn't play well with WebForms out of the box and you need to do a little playing around to get it working. Dave Ward's post here will likely be of help: http://encosia.com/using-jquery-validation-with-asp-net-webforms/
Is it possible cancel a java script event from another event?
No, generally it is not. Also, the blur event can't be canceled, and according to how to prevent blur() running when clicking a link in jQuery? it is complicated to hold the focus.
Yet, I don't think holding the focus when the user tries to leave a element (and focus the next input) is very userfriendly - only show a validation fail for the leaved input. The only event you really should prevent is submit, when validation has failed, and you then could focus the first invalid field.
var ageValid;
$("#txtAge").change(function validateAge(e) {
if(!isNaN(this.value) && this.value >= 0) {
ageValid = true;
} else {
$(this).addClass("invalid");
ageValid = false;
}
}).change();
$("#formid").submit(function validatePage(e) {
// maybe calls to the single validation functions?
if (! ageValid) {
e.preventDefault();
$("#txtAge").focus();
return false;
}
});