I am looking to make a simple form validation error message that displays under the username field.
I cannot seem to figure it out.
<form name ="myform" onsubmit="validation()">
Username: <input type ="text" name="username" /><br />
<input type ="submit" value="submit" />
<div id ="errors">
</div>
</form>
Here is my validation script:
function validation(){
if(document.myform.username.value == ""){ //checking if the form is empty
document.getElementById('errors').innerHTML="*Please enter a username*";
//displaying a message if the form is empty
}
You need to stop the submission if an error occured:
HTML
<form name ="myform" onsubmit="return validation();">
JS
if (document.myform.username.value == "") {
document.getElementById('errors').innerHTML="*Please enter a username*";
return false;
}
JavaScript
<script language="javascript">
var flag=0;
function username()
{
user=loginform.username.value;
if(user=="")
{
document.getElementById("error0").innerHTML="Enter UserID";
flag=1;
}
}
function password()
{
pass=loginform.password.value;
if(pass=="")
{
document.getElementById("error1").innerHTML="Enter password";
flag=1;
}
}
function check(form)
{
flag=0;
username();
password();
if(flag==1)
return false;
else
return true;
}
</script>
HTML
<form name="loginform" action="Login" method="post" class="form-signin" onSubmit="return check(this)">
<div id="error0"></div>
<input type="text" id="inputEmail" name="username" placeholder="UserID" onBlur="username()">
controls">
<div id="error1"></div>
<input type="password" id="inputPassword" name="password" placeholder="Password" onBlur="password()" onclick="make_blank()">
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
I would strongly suggest you start using jQuery. Your code would look like:
$(function() {
$('form[name="myform"]').submit(function(e) {
var username = $('form[name="myform"] input[name="username"]').val();
if ( username == '') {
e.preventDefault();
$('#errors').text('*Please enter a username*');
}
});
});
Related
I have a problem with the validation script of my php form to send an email, and although it works very well to validate the form, when the user clicks on the "accept" button of the alert, the script does not block the action, and the form is sent anyway...
What am I doing wrong?
Thanks in advance!
HTML:
<div id="form">
<section>
<form action="send.php" method="post" accept-charset='UTF-8'>
<label for="email"></label>
<input id="email" type="email" name="email" maxlength="50">
<input type="hidden" name="privacy" value="blahblahblah"/>
<input id="submit" type="submit" name="submit" value="SEND" onclick="validate(this);">
</div>
</form>
</section>
</div>
SCRIPT (validation):
function validate () {
var email;
email = document.getElementById("email").value;
expresion = /\w+#\w+\.+\w/;
if(email === "") {
alert("You cannot submit this request. You must give us an email");
return false;
}
else if (email.length>50) {
alert("The maximum for email is 50 characters");
return false;
}
else if (!expresion.test(email)) {
alert("Check your information. The email format is not valid");
return false;
}
}
Change the event to onsubmit and put it on the form.
function validate () {
var email;
email = document.getElementById("email").value;
expresion = /\w+#\w+\.+\w/;
if(email === "") {
alert("You cannot submit this request. You must give us an email");
return false;
}
else if (email.length>50) {
alert("The maximum for email is 50 characters");
return false;
}
else if (!expresion.test(email)) {
alert("Check your information. The email format is not valid");
return false;
}
console.log('passed!');
}
<div id="form">
<section>
<form action="" method="post" accept-charset='UTF-8' onsubmit="return validate(this);">
<label for="email"></label>
<input id="email" type="email" name="email" maxlength="50">
<input type="hidden" name="privacy" value="blahblahblah"/>
<input id="submit" type="submit" name="submit" value="SEND">
</form>
</section>
</div>
I am trying to trigger a form submit after validation, but my trigger does not seem to work. Can anyone help?
Here is my form.
<form id="contactform" action="<?= base_url(); ?>" method="post">
<div class="column one-second">
<input placeholder="Your name" type="text" name="name" id="name" size="40" aria-required="true" aria-invalid="false" />
</div>
<div class="column one">
<input type="button" value="Send" id="submit" onClick="check_email();">
</div>
Here is my script.
<script type="text/javascript">
function check_email() {
var name = $.trim($('#name').val());
if (name == "") {
error = true;
errortext = "<p>Please enter a name.</p>";
}
if (error) {
$('#error_text').html(errortext);
} else {
$('#contactform').trigger('submit');
}
}
The button type=submit then form will be submit.
Another way to do it is setting onsubmit action in your form like this:
<form id="contactform" action="<?= base_url(); ?>" method="post" onsubmit="return check_email()">
And then in your javascript:
<script type="text/javascript">
function check_email() {
var name = $.trim($('#name').val());
if (name == "") {
error = true;
errortext = "<p>Please enter a name.</p>";
}
if (error) {
$('#error_text').html(errortext);
return false;
}
return true;
}
Hope it helps.
I'm relatively new to HTML and JS and I've been trying to create a simple login page that on entering valid credentials redirects to index.html page. But no matter what I enter it always redirects to the index.html page. Here's the HTML code for the login page
<form role="form" action="index.html" name="formlogin" method="post" class="login-form" onsubmit="check_info()">
<div class="form-group">
<label class="sr-only" for="form-username">Username</label>
<input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username">
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
</div>
<button type="submit" class="btn" value="submit">Sign in!</button>
</form>
Here's the javascript
<script type="text/javascript">
function check_info()
{
var myform = document.formlogin;
if(myform.form-username.value == "test")
{
if(myform.form-password.value == "123")
{
return true;
}
}
else
{
return false;
}
}
</script>
P.S: I'm using a bootstrap login template.
Html:
onsubmit="return check_info()"
Javascript:
function check_info()
{
var user = document.getElementById("form-username").value;
var pass = document.getElementById("form-password").value;
if(user == "test")
{
if(pass == "123")
{
return true;
}
}
return false;
}
You can use required parameter like this:
<input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username" required>
Here is the following code, I am learning Javascript on my own and wanted to know how I could validate my code to make the textboxes say something like "please enter a value" or "please enter a valid Username or password.
I've attempted, but this is as far as online searching that I have done for it.
<head>
<script type = 'text/javascript'>
function nullcheck()
{
if(document.getElementById("").value==="")
{
alert("Please enter value.");
return false;
}
}
</script>
<title>Login Form</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<section class="container">
<div class="login">
<h1>Login</h1>
<form method="post" action="index.xhtml">
<p><input type="text" name="login" value="" id="Username or Email" /></p>
<p><input type="password" name="password" value="" id="Password"/></p>
<p class="remember_me">
<label>
<input type="checkbox" name="remember_me" id="remember_me"/>
Remember me on this computer
</label>
</p>
<p class="submit"><input type="submit" name="commit" value="Login" onchange="nullcheck()"/><button type="reset" value="Clear">Clear</button></p>
</form>
</div>
</section>
</body>
</htm
You can validate items one at a time, but a more general solution is to write a validate() function. Make your form element look like this:
<form method="post" action="index.xhtml" onsubmit="return validate();">
If the validate() function returns false, the form will not be submitted. It is up to the validate() function to issue prompts, etc.
Sample function:
function validate() {
var error = false,
errmsg="";
if(document.getElementById("username").value==="") {
error = true;
errmsg = "User name may not be blank.\n";
}
if(document.getElementById("password").value==="") {
error = true;
errmsg = "Password may not be blank.\n";
}
if (error) {
alert(errmsg);
return false;
} else {
return true;
}
} // validate
here's the html/javascript code...
I've tested it on safari and it works fine but in chrome & FF it doesn't validate at all.
it directs me automatically to the action link
<div id="mc_embed_signup">
<form action="http://example.com/subscribe/post?u=f752d10720e6104f1" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="email" value="" name="EMAIL" class="text" id="mce-EMAIL" placeholder="Enter you email">
<div style="position: absolute; left: -5000px;"><input type="text" name="b_f752d10720e6104f109250a61_95e4fc5f29" value=""></div>
<input type="submit" value="submit" name="subscribe" id="mc-embedded-subscribe" class="button" >
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate(){
var email = $("#mce-EMAIL").val();
if (!validateEmail(email)) {
$("#mce-EMAIL").css("border-color", "red");
return false;
}
$("#mce-EMAIL").css("border-color", "#dbdbdb");
return true;
}
$(document).ready(function(){
$("form").bind("submit", validate);
});
</script>
Thank you in advance.
function validate(){
var email = $("#mce-EMAIL").val();
if (!validateEmail(email)) {
$("#mce-EMAIL").css("border-color", "red");
return false;
}
else{
$("#mce-EMAIL").css("border-color", "#dbdbdb");
$("form").submit();
return true;
}
}
$(document).ready(function(){
$("#mc-embedded-subscribe").on("click",function(){ validate()});
});
this might be better , binding submit with validate , would submit the form anyway !