I'm currently creating a site that I would like to have users only be able to sign up to with just emails that end in .edu. As in, in order to sign up for this site, you need to have a .edu email. How would I be able to create that limitation?
Thank you!
The standard way to solve this in a Rails app would be to add a simple format validator to your User model that allows only addresses with a specific pattern:
# in your user model
validates :email, format: { with: /\.edu\z/, message: "only allows .org addresses" }
Use regular expressions. You can easily check to make sure it's a valid email and it's only a .edu email using regular expressions.
use the include? method
email = "test.test#email.edu"
if email.include? ".edu"
// do something in here
end
If you have a form, make a function that executes on form submit.
<form id="email" onsubmit="checkEmail()">
<input type="text" name="email" id="email-input"/>
</form>
For the script:
function checkEmail(){
var text = document.getElementById('email').value;
if(text.indexOf('.edu') === text.length-4){
return true;
}else{
return false;
}
}
The script checks if the email contains .edu at the very end of the input. If so, it returns true to carry on with submission. Otherwise, it returns false, and the form does not submit.
EDIT Case was given of throwaway.edu#gmail.com, as well as .edu.com, etc. Can handle this now.
Related
I am new to Angular development. I have the following requirements.
In case of text field, we need to validate the data entered in the text field with a regular expression with some extra validation. In the .html file, the existing code is like this.
<input type="text" id="domainName" [pattern]="validateDomain()" [placeholder]="ComputeIPAddressMessages.DOMAIN_NAME_PLACEHOLDER" name="domainName" class="form-control"
[(ngModel)]="computeIPAddress.domainName" [disabled]="disabledComponent" #domainNameModel="ngModel"
size="20" required>
<span class="tooltip-content">
{{ComputeIPAddressMessages.INVALID_DOMAIN_NAME}}
</span>
In the corresponding .ts file, the code is like this.
public validateDomain(): any {
return CommonConstants.DOMAIN_NAME_REGEX;
}
There are few new requirements so that I have to strip the contents of the html text and I have to do some manipulations before performing regular expression match.
SO I want to write method like this.
public validateDomain(): any {
// Check if the domain name already exists or not
// If the domain name start with .(period) or -(hyphen), remove it
// Other check
// perform some regular expression validation
// Return either true or false
return true or false;
}
Is it possible in case of Angular 7 ? Please suggest and help me to achieve it. This is the way I want to do custom regex validation instead of directly passing a regular expression.
It is not possible to give extra validations aside from regex patterns in [pattern] or pattern attribute in Angular as per my knowledge. The best way to handle it is using traditional (change) event in the html input tag and corresponding function call from component file. Add a boolean flag isInvalidDomain which will set to true when the pattern along with your conditions after doing your manipulations are not matching and set to false if validations are matching.
sample.html
<input type="text" id="domainName" (change)="validateDomain()" [placeholder]="ComputeIPAddressMessages.DOMAIN_NAME_PLACEHOLDER" name="domainName" class="form-control" [(ngModel)]="computeIPAddress.domainName" [disabled]="disabledComponent" #domainNameModel="ngModel" size="20" required>
<span class="tooltip-content" *ngIf="isInvalidDomain"> {{ComputeIPAddressMessages.INVALID_DOMAIN_NAME}}
</span>
yourcomponent.ts
isInvalidDomain :boolean = false;
validateDomain(){
if(condition1 == true){
if(computeIPAddress.domainName.test(CommonConstants.DOMAIN_NAME_REGEX)){
this.isInvalidDomain = false;
// success condition code
} else {
this.isInvalidDomain = true;
}
} else {
this.isInvalidDomain = true;
}
}
I am working on a project in Squarespace to create a very basic combination lock form where inputting different codes (invoice #'s) takes you to specific URLs. Because it is Squarespace, I don't think I have very many options for coding other than html (but I could be wrong - I'm very much in learning-mode!!).. I did find a similar question here Query String Redirection: How to change form input to URL?, but how to implement the response into squarespace's code block is way beyond me...
Right now my code looks like this:
</span></p>
<div style="margin-top:5px;">
<form method="GET" action="/our-team/bob">
<div class="input-append">
<input class="span2" id="appendedInputButton" name="code" type="text">
<button class="btn btn-primary" type="submit">Submit!</button>
</div>
</form>
</div>
Using this code, the form takes you to the our-team/bob page every time, regardless of what is entered into the form. e.g. if 0000 is entered into the form, I am redirected to www.mydomain.com/our-team/bob?code=0000 -- which is still just the our-team/bob page; if 1234 is entered into the form, I am redirected to www.mydomain.com/our-team/bob?code=1234 --- which is still just the our-team/bob page; and if nothing is entered into the form and I click submit, it still redirects me to the our-team/bob page.
Ideally, each unique code will bring me to a unique page that I have developed. But squarespace doesn't let me use a "?" in a page url, so I can't just redirect that way. I would like to be able to enter a specific code that takes me to a corresponding page and need to check the code against an array with some simple logic like this:
If string is 1234, go to /our-team/bob
If string is 5555, go to /our-team/jane
If string is 0000, go to /our-team/allen
(etc.)
If string is anything else, show an error and not leave the page at all OR go to some sort of error page.
Hopefully this makes sense (and hopefully it is possible to do!) Please let me know if there is any other information I can provide you with. Your help is VERY much appreciated!
What you are asking for is not possible with HTML and standard HTTP protocol. The form values are either sent as query string parameters (if you are using GET) or as part of the request body (if you are using POST). Here you seem to be asking to make some mapping between the value entered by the user and the specific page being called on the server. The only way to achieve that is to use some javascript. Subscribe to the onsubmit event of the form and write the mapping between the client value and the server one:
<form method="GET" action="/our-team/bob" onsubmit="return handleSubmit();">
...
</form>
and then you could define the handleSubmit function to implement your custom logic:
<script>
var handleSubmit = function() {
var value = document.getElementById('appendedInputButton').value;
if (value === '1234') {
window.location.href = '/bob';
} else if (value === '5555') {
window.location.href = '/jane';
} else if (value === '0000') {
window.location.href = '/allen';
} else {
window.location.href = '/some-default-page';
}
return false;
};
</script>
<input type="checkbox" name="Package1" value="packagename">
<input type="checkbox" name="Package2" value="packagename">
<input type="checkbox" name="Package3" value="packagename">
How to make any two checkboxes required for the user to submit the form. The user should not be able to submit the form unless he has checked atleast two checkboxes?
How to achieve that?
Rename checkboxes to name=package[] and values 1, 2, 3.
Then in PHP you'll have o condition (if you send form with GET method, just change POST to GET):
if (isset($_POST['package']) && count($_POST['package']) >= 2) {/* continue */}
If you want to validate it in browser (JS), than:
<script>
var i = 0;
$('[type="checkbox"]').each(function() {
if ($(this).is(':checked')) {
i++;
}
});
if (i <= 1) {
return false; // disable sending form when you've checked 1 checkbox in maximum
}
</script>
Add a class that refers only these checkboxes and then count how many are checked.
A quick and dirty way to validate the checkboxes using JavaScript:
JavaScript
checkCheckboxes = function() {
var numberOfCheckedCheckboxes = 0;
var checkbox1 = document.getElementsByName("Package1")[0];
var checkbox2 = document.getElementsByName("Package2")[0];
var checkbox3 = document.getElementsByName("Package3")[0];
if (checkbox1.checked)
{
numberOfCheckedCheckboxes++;
}
if (checkbox2.checked)
{
numberOfCheckedCheckboxes++;
}
if (checkbox3.checked)
{
numberOfCheckedCheckboxes++;
}
alert(numberOfCheckedCheckboxes >= 2);
}
DEMO: JSFiddle
This code isn't the cleanest block of code, however it does get the job done, and will return true if there are at least 2 checkboxes checked, and will return false otherwise. To make it cleaner, you can change the name value of each checkbox to the same name, such as "packages", and then use document.getElementByName("packages"), then use a for-each loop to loop through each element and check its checked state (I would provide a demo in JSFiddle or JSBin, however it seems that Google Chrome is blocking the script in that case). Using the for-each implementation would allow you to use the same amount of code, regardless of the number of checkboxes.
In HTML, you cannot.
You can impose restrictions in client-side JavaScript or in server-side processing of form data, or both. As usual, client-side restrictions are inherently unreliable and should be regarded as convenience to the user, not a reliable method of doing anything. Server-side processing depends on the server-side technology used.
After completing Ember's Getting Started Tutorial, i'm trying to make my first very basic app and am already blocked :)
I just want to do a simple Hello World:
my HTML contains a text input when a user can type his name
when the user presses enter, a <div> is updated with the text: "Hello user!"
Here is my template:
<script type="text/x-handlebars" data-template-name="user">
<form role="form">
<div class="form-group">
<label for="firstname">Firstname</label>
{{input type="text" class="form-control" id="new-user" value=newFirstname action="updateMessage"}}
</div>
</form>
<div class="well" id="new-greeting">
{{newGreeting}}
</div>
</script>
And here is my controller:
Teamtools.UserController = Ember.ArrayController.extend({
newGreeting: "Empty",
actions: {
updateMessage: function () {
var firstname = this.get('newFirstname');
this.newGreeting = "Hello " + firstname;
}
}
});
When loading the page, the input field and the "Empty" message appear. Great!
But when I type a name and then enter, I'm redirected to a blank /? page. I'm sure this is very basic stuff but if I could get help to understand what's going wrong here, I would really appreciate it.
ps: it it can help an explanation, I'm more of a Ruby on Rails world usually.
I believe the problem is with specifying an "action" for the input element - that's the URL you want to send the form data to, so you don't need that as you don't need to make a server request. Similarly you don't need an actions hash in your controller for this.
Ember's a lot smarter than you're giving it credit for. You can set it up so that you don't need to handle when anything changes, as it'll do it automatically. What you'd need to do is something like this:
Teamtools.UserController = Ember.ArrayController.extend({
newGreeting: function () {
var firstName = this.get("newFirstName");
var greeting = "Empty";
if (firstName.length !== 0)
{
greeting = "Hello " + firstName;
}
return greeting;
}.property("newFirstName")
});
The property("newFirstName") at the end of the newGreeting method is important: it tells Ember that newGreeting can be evaluated to give a property (a computed property) which can be displayed in the view. The "newFirstName" argument tells Ember that this value should be recalculated whenever newFirstName is changed.
Disclaimer: I haven't actually tested this code, but it should be something like what you're after...
Return false from your action so that it doesn't percolate. The navigation to index is happening farther up the chain of Controllers/Routes that can respond to the action.
iPad safari is supposed to be html5 compliant, but it seems that the required element doesn't work. Anyone know why, or have a decent workaround that doesn't require a ton of JavaScript?
My code
<input type=email class=input placeholder="Email" name="email" required>
It's not supported in iOS yet: when can I use: required.
This is a jQuery solution to the issue, it highlights the input fields that have failed in a pinky colour too.
$('form').submit(function(){
var required = $('[required="true"]'); // change to [required] if not using true option as part of the attribute as it is not really needed.
var error = false;
for(var i = 0; i <= (required.length - 1);i++)
{
if(required[i].value == '') // tests that each required value does not equal blank, you could put in more stringent checks here if you wish.
{
required[i].style.backgroundColor = 'rgb(255,155,155)';
error = true; // if any inputs fail validation then the error variable will be set to true;
}
}
if(error) // if error is true;
{
return false; // stop the form from being submitted.
}
});
Since iOS 10.3 this atrributes are supported. Also e-mail type require writing the # symbol and so on...
If you are already using jQuery, Modernizr, and yepnope, this is one way to deal with it. If you aren't then this will add a lot of extra javascript.
My solution
I guess you can do something before the submit action like this
<form name="myForm" action="valid.html" onsubmit="checkValid()" method="post">
... ...
</form>
after pressing submit button, checkValid() is evoked before it actually submits. a return value of truewill continue the submit action.
refer to this post for further explanation.:)
If you use PHP, you can add a validation like this
function validation(){
if(isset($_POST['submit'])){
$email = $_POST['email'];
if(empty($email)){
echo $error = "Your email cannot be empty";
} else {
return true; //or do something next here
}
}
You then add this function in php before your form.