jquery registration form, email if statement not working - javascript

I am making a registration form using jquery to dynamically update each field as the user enters information, for some reason when I go to compare emails the if statement does not run. any help would be most appreciated.

have a look at this link which shows proper email validation in php. Also then if the mail is valid apply the check if it is already taken or not. I wrote to check if emails exist after because Database query are costly and better not to have query for all bogus data also.
Hope this helps you out
also change
<input type = text id = email>
to
<input type = email id = email>
which is supported in html5

Related

Send Form with MailApp after fetching html. Embed Google Form into email. Generated email contains only text

I want to embed a Google form in an email and send it with MailApp. I'm attempting to use code found at: https://stackoverflow.com/a/23671529/4305236:
var form = FormApp.create('New Form');
....
var url = form.getPublishedUrl();
var response = UrlFetchApp.fetch(url);
var htmlBody = HtmlService.createHtmlOutput(response).getContent();
MailApp.sendEmail({
to: email,
subject: subject,
htmlBody: htmlBody,
});
...
The logs show all the html for the form.
However, when I run the code, the email just looks like text, with the links at bottom. When I "show original" in the email, though, all that html for the form seems to be there, like in the log...
Would greatly appreciate any help.
What generated form looks like, want this to be embedded in email:
What they are getting instead:
Answered here: https://stackoverflow.com/a/60749897/3383907.
Copy/pasting for history purposes:
When Google sends the form to folks directly and embeds the form in the email they are using their new offering called AMP. You can read more about it here:
https://developers.google.com/amp/
https://www.blog.google/products/g-suite/bringing-power-amp-gmail/
https://developers.google.com/gmail/ampemail/
The code you're using gets the raw HTML of the form as it would be rendered for a user in a browser. This code is not in AMP format. Ergo it will not do what you want.
If you want that AMP experience you will need to create the AMP email yourself.
I don't think FormApp has a programatic way to send the form to folks, like you can from https://docs.google.com/forms/.
I hope that helps.

Yii2: Use popover in form validation messages

I'm looking to create custom validation messages on my activeforms in Yii2 for the client side validation. The goal i want to achieve is to get a bootstrap popover on the side of the form field with the validation error message of that field, e.g. password too short or password does not meet the requirements. These messages change dynamicaly based on the given input and validation rules.
I've been looking at using the clientValidateAttribute and create javascripts for the fields, this is working but i'm missing out on setting the proper validation messages coming from the model validation.
This is a simple example to create a popover based on some conditions in the clientValidateAttribute.
return <<<JS
var def = $.Deferred();
if (attribute.name == "email" && value !== "") {
$( ".login-pop" ).popover("show");
} else {
$( ".login-pop" ).popover("destroy");
}
deferred.push(def);
JS;
This will show an popover on the .login-pop class field when the attribute is email and its empty. I've been looking to use the messages array, but it looks like it's only set once.
Perhaps i'm mislead with the validation and there might be easier or better solutions to achieve this goal and be able to validate per field, return the proper messages to be used in a javascript tool.
Thank you.

How to init invalid email and show in input(type="email")?

I have a signup form built with AngularJS using frontend and backend (with Express.js) input verification. Whenever a user enters an invalid email address, like qwidjq&/%, I'd like to show an error message and send the form back to the user. The email input field should contain the invalid email as the value.
The problem is that I cannot init input(type="email") fields with invalid email values. Only input(type="text") works. Here is an example.
Any ideas how to work around this restriction? I don't want to use input(type="text") and a custom directive. I'd like to keep input(type="email") as it changes keyboard layout on mobile devices.
Thanks in advance!
Perhaps display the bad text NEXT to the input element, e.g.
<input type="email" /><span id="emailerror">qidjq&/% is not a valid address</span>
You can initialise your input by initialising your model with data.
Example: http://plnkr.co/edit/TUJ6lv?p=preview
Unfortunately initializing a model to display invalid data would require patching AngularJS. In fact if you initialize any validated field with invalid data, it will appear blank.
Here is the code that is causing the email input to display blank without a valid email:
https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js
(line 622)
var emailValidator = function(value) {
if (ctrl.$isEmpty(value) || EMAIL_REGEXP.test(value)) {
ctrl.$setValidity('email', true);
return value;
} else {
ctrl.$setValidity('email', false);
return undefined;
}
};
Forgive me if I'm being stupid but can't you just disable the button on your form while the inputs are invalid. Alternatively, don't leave the form until you have had a positive response to your ajax request. If you get a negative response then show an error message. The data will still be in the form. I'm not familiar with Express.js so perhaps that is forcing you to refresh the form. I thought the whole point of using frameworks like Angular is to give you total control of the UI.

HTML form with intermediate web service service call before submit

I have an HTML form to update the address in the account that submits to a Java servlet.
The problem is that, the form should not accept free flowing address text. Instead the user should enter the zip code/house number/street name, and hit a search button.
This search needs to go to a webservice, perform authentication and get a list of valid addresses that match the search criteria.
This list of addresses should be displayed to the user in the same form (either unhide a hidden element or use a modal dialog), so the user can pick his address.
Only after the valid address is picked, the user should be able to hit the form submit button which sends the data back to the servlet.
I am not sure how to have these 2 buttons do different actions in the form. I am very new to JavaScript and any pointers or examples are much appreciated.
For your webservice build an output of the values based on a search result (a basic string). Put this data in a JSON statement or just a javascript array.
Return something that looks like this.
['SearchResult1', 'SearchResult2', 'SearchREsult3']
On your search box. Bind a function on change or blur.
$('#SearchBox').bind('change', function(){
var val = $(this).val();
//Please reference the Jquery Ajax function as im typing this from memory and i always mix one or two things up :).
$.ajax({
"type" : "post",
"url" : "yoururlhere",
"data" : { "search":val },
success : function(dataset){
//When it comes back here check to see if its valid data etc etc
//After you validate you can populate a picklist on the page with the values. Or do anything you want with the values like this
for(x in dataset){
$('#DocumentElement').append('<p>'+ dataset[x] +'</p>');
}
}
});
});
This should start you out. After that you can just do more things on the callback, or modify the dom in a way which suits you better :).

How to validate username using Javascript?

I want to know how can I validate using Javascript that if user has entered any username at the time of creating an account is already present in database and ask user to type any other username?
Attach listener for blur event for <input /> element.
Using AJAX send request to the server (with field value as parameter)
On the server side check whether given username is already in use or not
Based on server's response display (or not) This username is already in use message
jQuery (I'm too lazy for pure JS) + PHP sample code:
<form ...>
...
<input type="text" name="username" id="input-username" />
<p class="error"></p>
...
$("#input-username").blur(function() {
$.post("/check-username.php", { username: $(this).val() }, function(data) {
if ("0" == data) { /* username in use */
$(this).next("p").text("This username is already in use.</p>");
} else { /* username is fine */
$(this).next("p").empty();
}
});
});
<?php
$username = $_POST['username'];
// check whether given username exists in database
$usernameExists = ...;
echo $usernameExists ? '0' : '1'; // 0 if exists, 1 if not.
The answer is AJAX. If you must validate against a database, you need to make a call to the server. The only way to do that (EDIT: properly) without reloading the page is AJAX. How you implement it will depend upon what javascript libraries you are using, if any, and what your server is like. I suggest you do a little searching and reading on it - this is a pretty common use case.
Personally, I would use a JQuery validation plugin just to make things simple.
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
But in general it would consist of a small AJAX request to a server (ie. JSON object) with the username and do a 'search' in your database and return either true/false after the user hits enter or tab in the textfield (attach an event listener). Then within your callback response alter the DOM elements of your choice to indicate to your users whether the account name is already present in the database or not.
Ajax might not be the only solution, since usernames are generally public. A simple way is to just have an RDF/XML document at some point (which just updates with every new user added) which has a list of all the users on your site that you can easily just traverse with Javascript DOM to see if that user is already in use. You also make them pay computational power, not you, depending on how nice you are it's an advantage or a dis-advantage.

Categories