Develop Reference

How to make button disable with error message from response and after one click using angular2

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
}

How to conditionally submit a form?

I am using following form and submit button in my dynamic html page.
<form method=\"post\" class=\"my-form\" >
and
<input type=\"submit\" name=\"submitButton\" value=\"Submit\" id=\"button1\" />
What I am trying to do is when a particular input is provided by user, then display an alert box asking if user wants to submit the change or just stay on the same page without submitting the change.
I can display the alert box (with help from stackoverflow members) but along with window.alert what I should add to JavaScript so the form is not submitted if user clicks "cancel" on window.confirm and the form is submitted if user clicks "ok" on window.confirm?
JavaScript example is at fiddle
$(document).on('input', '.my-input', function(){
$(this).closest('form').addClass('changed');
});
$(document).on('submit', '.my-form', function(e){
if($(this).hasClass('changed')){
var x=window.confirm("You have set a unique threshold for one or more states below. Are you sure you want to reset them all?")
if (x)
window.alert("Thresholds changed!")
else
window.alert("Thresholds not changed!")
}
$(this).removeClass('changed');
e.preventDefault();
});

You just need to change your logic so that preventDefault() is only called when the user declines the confirm box. Try this:
$(document).on('submit', '.my-form', function (e) {
if ($(this).hasClass('changed')) {
var allowSubmit = window.confirm("You have set a unique threshold for one or more states below. Are you sure you want to reset them all?")
if (!allowSubmit)
e.preventDefault()
}
});
Example fiddle
If you click 'OK' you'll see that the form is submit (and a warning from jsFiddle to use a POST request - but that's normal), whereas clicking 'Cancel' does nothing.

You can also return false in your submit function handler, it should work. Check this question for an example.

Javascript alert button OK button

I want to ask about javascript alert button.
Is it possible to do anything (e.g: redirect, clear form) after I clicked the OK button on the alert button?

You can just apply your function right after the alert:
alert('something');//execution is halted until ok button is pressed
foo(); // calls the foo method after ok button is pressed

You could change your alert to use a confirm window
var response = confirm('Are you sure you want to clear the form?');
if (response){
// clear the form
console.log('clearing the form approved');
}
The confirm window is similar to the alert except it shows OK and Cancel buttons. It returns a bool result depending on the user's choice.
Like the alert window, it halts program/script execution until the user makes a decision

test onclick in a function

Quick question: How do i check if a submit button is clicked in a function.
explained question:
ok, so I have a validate script for my sign-up page. The validate function is run onblur of every input (after the submit button has been clicked first).
However, the validate script not only gives the inputs a red background if the correct information hasn't been entered, but it also displays an alert message.
My problem is: I only want to display the alert message if the submit button is clicked, otherwise i just want to do change the background color. So how do I check if a submit buttons is clicked, in a function.
I could just have two different functions, one to be run for all the inputs. and one to be run for the submit button.

Register the submit event to your form to validate before it is submitted.
Added: You should register the function in document ready event.
$(function(){
$("#myformid").submit(function()
{ if(!highlightNshowError())//your function to validate the form, return false if validation failed
return false; //stop submitting the form
else
return true;
});
});
or simply
$(function(){
$("#myformid").submit(function()
{
return highlightNshowError();
});
});

jQuery validation - multiple groups

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.