I would like to know how to only allow #gmail.com and #yahoo.com for my email validation in html. I know about the <input type="email" validation but that would allow emails in any format and I only want those two to be accepted. How do I do it??
The only way is RegExp
If you are using a framework (angular/react/vue) they have there own(compatible third party) libraries to handle form validation.
If you are using plain JS you can add onchange event with your input and test the input with desired regex or before submitting the form you can test the input.
Regex you will need
/^[a-z][a-z0-9_.]*#(gmail|yahoo).com$/gm
More about Regex with Javascript:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
Ok, it is not the best way of achieving this, for best way use it at backend, with PHP email validation filter.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/css/master.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<form id="emailForm" action="" method="post">
<label for="email">E-mail</label><br>
<input id="email" type="email" name="email" placeholder="Please enter your
email" value="">
<button onclick="validate();" type="button" name="button">Submit</button>
</form>
</body>
</html>
Inline javascript, you can carry it later, keep it under html for testing purposes.
<script type="text/javascript">
function validate(){
var email = $('#email').val();
if (email.length == 0) {
window.alert("you didn't enter an email");
}
if (!email.includes('#')) {
window.alert("you mail is unvalid");
}
var emailHost = email.substr((-1)*(email.length - email.indexOf('#') - 1));
var allowedDomains = ["gmail.com","hotmail.com","yahoo.com"];
var inAllowed = false;
for(i=0;i<allowedDomains.length;i++){
if (allowedDomains[i] == emailHost) {
inAllowed = true;
}
}
if (!inAllowed) {
window.alert("your e-mail hosting not supported");
}else { //submit form here
window.alert("success");
$('#emailForm').submit();
}
}
</script>
And back end get email from $_POST if using php
<?php
var_dump($_POST);
?>
Related
I have this code:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
When I type a number, for example 05423110, I get on the adress bar is "https://api.pagar.me/1/zipcodes/?cep=05423110", but I would like to have "https://api.pagar.me/1/zipcodes/05423110".
What do I need to change on my code?
Thanks!
I would do it like this. The other answer will have the problem where it could potentially append something twice.
I also set it so the button disables for user friendliness (in case the server takes awhile to respond).
This solution does use jQuery, but chances are you will need to do other simple DOM manipulation and this will be very helpful.
Because you don't want the query string in there, but you must have it be GET, then its impossible not to have it append the query string to the URL (because that's what a GET request does).
Instead, I use javascript to simply redirect to the proper URL and ignore the form GET/POST entirely.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
(function() {
var form = $('form');
var baseUrl = form.attr('action');
$('form').submit(function(e) {
e.preventDefault();
form.find('[type="submit"]').prop('disabled', true);
window.location.href = baseUrl + form.find('[name="cep"]').val();
});
})();
</script>
Add method="post" to the form tag, then add an event listener to the form's submit event which append the input value to the action attribute value on the form:
const form = document.forms[0]
form.addEventListener('submit',()=>{form.action+=cep.value})
<form action="https://api.pagar.me/1/zipcodes/" method="post">
<input type="text" placeholder="cep" name="cep" id="cep">
<input type="submit">
</form>
Ofc StackOverflow snippets prevents POST.
How can I link files together? What I mean by that is, how do I create a button, and when clicked, takes you to another site? (Or in my case, the next page of reading) Sorry for stupid question, I'm new to coding, and I only know password based buttons. :(
password: <input type=password ID="Next"> <button onclick="correctpassword ();">submit</button>
</div>
<script type="text/javascript">
function correctpassword () {
var code = document.getElementById ("Next").value;
// alert ("Haha! I know your password! It's \"" + code + "\"");
if (code == "Next") {
location = "NHD2.html";
} else if (code == "next")
alert ("So Close!!");
else location = "LoginWrongSite2.html";
}
Is what I have.
I think you want to simulate a little form.
If that is what you try to do then try this (be sure to have both pages on the same directory):
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Page1</title>
</head>
<body>
<form onsubmit="submitform(event)" action="Page2.html">
Name: <input type="text" placeholder="Your name here" id="username"/>
Password <input type="password" id="userpassword"/>
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
function submitform(event) {
var username = document.getElementById('username');
var userpassword = document.getElementById('userpassword');
if(username.value !== 'test' || userpassword.value !== '1234') {
event.preventDefault();
}
}
</script>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Page1</title>
</head>
<body>
We are good !
</body>
</html>
This will basically define a form in the page1.
When you type test as username and 1234 as password in that page it will be submitted and you will navigate to what action attribute says.
If you enter a value different than test for ussername or 1234 for password navigation will be cancelled.
Of course this is just a simple example, in a real app you will not do something like this, it is just to let you know how to navigate from page1 to page2 (there are other ways as well like links for instance).
Hope this helps !
I want to display a validation message only when a user types something in the input field. I can't put required in the input box.
<input type="url" class="form-control" name="website_url">
The input data should be a valid website URL.
Can I do this without using Jquery or Javascript?
You can achieve this by javascript like this.
<!DOCTYPE html>
<html>
<body>
Enter your url: <input type="text" id="url" onfocusout="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("url");
var re = //use valid regex here;
if (!re.test(url)) {
alert("url error");
return false;
}
}
</script>
</body>
</html>
you have to use valid regex for url like this
but I prefer to do server side validation to in case javascript is off.
Im in the process of adding the reCaptcha from google to my form. The problem is that even though I have followed the instructions from google. I can still press the Submit button without doing the recaptcha. Any Ideas please heres the relevant code snippets.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>webpage title</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
And the this snippet in the form part of the webpage
<div class="g-recaptcha" data-sitekey="xxxxxxmyapikeyxxxxxxx_xxxxxxmyapikeyxxxxxxx"></div>
<li class="buttons">
<input type="hidden" name="form_id" value="1136056" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
As far as I'm aware I have placed the code in the specified areas of my webpage. One before the closing tag on your HTML template and the snippet at the end of the where I want the reCAPTCHA widget to appear.
I have put the recaptcha before the submit button. There is a part about the server side integration that I do not understand.
[QUOTE]
When your users submit the form where you integrated reCAPTCHA, you'll
get as part of the payload a string with the name "g-recaptcha-response".
In order to check whether Google has verified that user,
send a POST request with these parameters:
URL: https://www.google.com/recaptcha/api/siteverify
secret (required) xxxxxmysecretkeyxxxxxxx
response (required) The value of 'g-recaptcha-response'.
remoteip The end user's ip address.
[/QUOTE]
Can anyone please shed some light on this please.
Thankyou
So we set up the form and make sure your library is included, I prevent the submit button from being clicked while the recaptcha has not been completed and show a tooltip to notify the user it is needed to continue. Then enable it when it has been complete using the callback methods.
login.php
<div class="formContainer">
<script src='https://www.google.com/recaptcha/api.js'></script>
<form action="loginHandler.php" method="post" name="login_form" id="loginForm" class="loginForm">
<h2>Login</h2>
<p><input type="text" required placeholder="Email" name="email"></p>
<p><input type="password" required placeholder="Password" name="password" id="password"></p>
<div class="g-recaptcha" data-callback="captcha_filled"
data-expired-callback="captcha_expired"
data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">
</div>
<div>
<p class="show-tt" data-toggle="tooltip" title="Complete the reCAPTCHA to login." data-placement="bottom">
<input id="submitLogin" type="submit" value="Login">
</p>
</div>
</form>
</div>
<script>
//prevent submit and show tooltip until captch is complete.
var submit = false;
$("#submitLogin").prop('disabled', true);
function captcha_filled() {
submit = true;
$("#submitLogin").prop('disabled', false);
$(".show-tt").tooltip('destroy');
}
function captcha_expired() {
submit = false;
$("#submitLogin").prop('disabled', true);
showTooltip();
}
function showTooltip () {
$(".show-tt").tooltip('show');
}
</script>
Now we post to loginHandler.php, or wherever your form submits too and then there we will assign your secret key and then verify the request with google.
loginHandler.php
$secret = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
if (isset($_POST["g-recaptcha-response"])) {
$url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($secret) .
'&response=' . urlencode($_POST['g-recaptcha-response']) . '&remoteip=' . urlencode($_SERVER['REMOTE_ADDR']);
//ip address is optional
$result = json_decode(file_get_contents($url), true);
if ($result != null && $result['success'] === true) {
//success, handle login/submit data or whatever
} else {
//response is bad, handle the error
header('Location: login.php?error=4');
}
} else {
//captcha response is not set, handle error
header('Location: login.php?error=5');
}
A very peculiar bug in a simple html form. After changing an option, button has to be clicked twice to submit the form. Button is focused after clicking once, but form is not submitted. It's only this way in IE8 and works fine in Chrome and FF.
PAY ATTENTION TO 'g^' right before <select>. It has to be a letter or number followed by a symbol to generate this bug. For example, 'a#','f$','3(' all create the same bug. Otherwise it works fine. BTW, if you don't change option and click button right away,there won't be any bug.
Very strange, huh?
<form method="post" action="match.php">
g^
<select>
<option>Select</option>
<option>English</option>
<option>French</option>
</select>
<input type="submit" value="Go" />
</form>
I am providing the code here, which is working fine. Check this code whether this code also is giving you the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Sample page for language selection </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
p{display: none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// language as an array
var language = ['Arabic', 'Cantonese', 'Chinese', 'English', 'French', 'German', 'Greek', 'Hebrew', 'Hindi', 'Italian', 'Japanese', 'Korean', 'Malay', 'Polish', 'Portuguese', 'Russian', 'Spanish', 'Thai', 'Turkish', 'Urdu', 'Vietnamese'];
$('#muyu').append('<option value=0>Select</option>');
//loop through array
for (i in language) //js unique statement for iterate array
{
$('#muyu').append($('<option>', { id: 'muyu' + i, val: language[i], html: language[i] })) }
$('form').submit(function() {
// alert('I am being called!'); // check if submit event is triggered
if ($('#muyu').val() == 0) { $('#muyu_error').show(); } else { $('#muyu_error').hide(); return true; }
return false;
});
})
</script>
</head>
<body>
<form method="post" action="PostProb">
I am fluent in <select name='muyu' id='muyu'></select>
<p id='muyu_error'>Tell us your native language</p>
<input type="submit" value="Go"/>
</form>
</body>
</html>