Develop Reference

Have problem sending confirmation email to user, after they complete filling out a form

After a user completes a form, they click the "Submit" button. After that, the user will get an conformation email. In the form, we ask the user to enter their e-mail address, and based on that information, that's how I want to send the confirmation email to the user.
Right now, I am hard coding the e-mail address to myself. But I am wondering is there a way to send the user the conformation email based of the value they enter in the user email address input field?
This how I have it set it up:
// hard code my e-mail address for now.
<input type="hidden" name="recipient" value="leamblahblah#gmail.com">
<fieldset>
<div class="myform">
<label for="user_emailaddress">Enter email address <span class="required">*</span></label>
<input required name="user_emailaddress," type="email" class="form-control" placeholder="youremail#example.com">
</div>
</fieldset>

<input required name="user_emailaddress," type="email" class="form-control" placeholder="youremail#example.com">
you have a mistake in the name of that field *,*
<input required name="user_emailaddress" type="email" class="form-control" placeholder="youremail#example.com">

Assuming you already have an email dispatch function, you can get the value of an input field from javascript.
document.querySelector('input[type=email]').value

ini_set("SMTP", "aspmx.l.google.com");
ini_set("sendmail_from", "YOURMAIL#gmail.com");
$message = "The mail message was sent with the following mail setting:\r\nSMTP = aspmx.l.google.com\r\nsmtp_port = 25\r\nsendmail_from = YourMail#address.com";
$headers = "From: YOURMAIL#gmail.com";
mail("Sending#provider.com", "Testing", $message, $headers);
echo "Check your email now....<BR/>";

Setting correct autofill username and password

In my angular application I have a registration form which has the following fields in the same order
1) email id
2) otp
when the otp is entered the below fields becomes visible
3) full name
4) password
The last element is the submit button.
When we click on submit button the browser prompts the user to save the username and password.
I want the Autofill to save email as the username but its taking the fullname as the username. I tried adding a hidden field with Email filled but it worked on Firefox and dint work on Chrome
Is there any other way to achieve this by not editing the order of the form elements?
Adding html for the inputs
<input type="email" [(ngModel)]="email" name="userName" required />
<input type="text" [(ngModel)]="fullName" name="fullName" id="fullName" #fullName="ngModel" dirname="fullName" />
<input [(ngModel)]="password" id="pwd" type="password" name="password" #password="ngModel" required />
Please guide
Thanks!

AngularJS multiple validations on single element and validation without required

I am building a form and using the inbuilt AngularJSvalidations objects to validate the form. I have following form:
<form name="myForm" ng-submit="DoSomething()" novalidate>
<textarea name="EmailTo" required="" rows="2" cols="20" ng-pattern="EmailRegEx" ng-model="EmailTo"></textarea>
<textarea name="EmailCC" rows="2" cols="20" ng-pattern="EmailRegEx" ng-model="EmailCC"></textarea>
<textarea name="EmailBCC" required="" rows="2" cols="20" ng-pattern="EmailRegEx" ng-model="EmailBCC"></textarea>
</form>
I am displaying the error messages like this:
<ul>
<li ng-if="!myForm.EmailTo.$valid">Please enter email To</li>
<li ng-if="!myForm.EmailCC.$valid">Please enter email CC</li>
<li ng-if="!myForm.EmailBCC.$valid">Please enter email BCC</li>
</ul>
In the above form , the EmailTo and EmailBCC are mandatory so I have added the required attribute on them and EmailCC is not mandatory so there is no required attribute on it. I have two questions:
Since EmailCC is not mandatory, how can I validate it without adding the required attribute in case the user enters any value in it?
How can I display separate messages for required and ng-pattern validations? Display a message when the EmailTo field is empty and display another message when the entered email is not valid?
EDIT:
I have declared message with combination of $valid and $untouched to show message when field is empty and when field is not valid like this:
<li ng-if="myForm.EmailTo.$untouched">Please enter email To</li>
<li ng-if="(!myForm.EmailTo.$untouched && myForm.EmailTo.$invalid)">Please enter valid emails seaparated by ';' in email To</li>
The above invalid message is displayed only when the control loses focus (onblur) and not on keypress, I want the valid message to be displayed on keypress instead of when control loses focus. Also when I make the control empty, is still displays the invalid message instead of the empty message. How to fix this?

1) For your first question:
In AngularJS inputs have the following states:
$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid
Source: https://www.w3schools.com/angular/angular_validation.asp
You can check if EmaillCC input is pristine with something like this in your controller:
var isEmailCCPristine = $scope.myForm.EmailCC.$pristine;
2) By placing the correct condition in the list items ng-if:
<li ng-if="myForm.EmailTo.$untouched">Please enter email To</li>
<li ng-if="myForm.EmailTo.$invalid">Please enter a valid email To</li>
I didn't test but you might have to adjust this codeblock according to your needs.

There is already a directive. You can use ngMessages for this. Link: https://docs.angularjs.org/api/ngMessages/directive/ngMessages
Example:
<form name="myForm">
<label>
Enter your name:
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>

Prevent browser from asking to save login info when the form is invalid

I've got a simple login form with the absolute basics in place for front-end validation. It just checks that the fields aren't blank and that the email is in the most basic correct format. When the form is invalid I prevent the submit behavior.
When I enter something into both fields so they aren't blank, but the email is still invalid, the form is not submitted, yet I am still prompted by browsers to save my credentials.
How can I prevent this from happening when the form is invalid and hasn't yet been submitted? I still want this feature to be offered to users, but only when the form is actually submitted.
Here's the basics of how I've set this up:
HTML:
<form method="post" action="" onsubmit="return validateForm()" novalidate>
<input type="text" id="email" required autofocus>
<input type="password" id="password" required>
</form>
JS:
function validateForm() {
var isValid = true;
//validation logic goes here...
return isValid;
}
Here's a working demo: https://codepen.io/chrismbarr/pen/awmVyq
Enter an invalid email and something in the password field to trigger this.

Validate form on submit only using parsley.js

I have a simple form
<form action="#" method="GET" class="parsleyVal">
<div class="input-group input-group-lg">
<input type="email" name="email" class="form-control input-email"
placeholder="Enter your email"
data-parsley-required-message="Please enter your email address"
data-parsley-required title="Please enter your email address"
auto-complete="off" data-parsley-trigger="submit" />
<span class="input-group-btn">
<button class="btn btn-orange" type="submit" data-parsley-trigger="click touch">
Sign up
</button>
</span>
</div>
</form>
Validation starts when the sign-up button is clicked.
However, if there is no email specified, an error is shown:
enter your email.
When users start typing their email address, parsley.js does the automatic validation and shows that email must be valid.
I'd like parsley.js to re-validate the email field when submit button is clicked again but not on the fly.
I have tried xCodexInlinexPlacexHolderx on the input field - does not help.

Looks like I finally figured out what I wanted.
Might be not ideal way to do it, if anyone could recommend something else.
$('.parsleyVal input[type=email]').on('keyup keydown', function () {
$('.filled').removeClass('filled');
$('.parsleyVal').parsley().destroy();
})
Script removes class to hide error message and destroy parsley validation, which will be triggered again on sign-up button click.

You can control what triggers the validation with two different settings:
data-parsley-trigger
Setting for what triggers the validation the first time. The default is null which basly means on submit
data-parsley-trigger-after-failure
Setting for what triggers a revalidation after the first failure. The default is input which means that the field will be revalidated after each change on the field.
The setting you need is: data-parsley-trigger-after-failure
Example:
<input type="email" id="profile-email"
data-parsley-required="true"
data-parsley-trigger-after-failure="submit"/>