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.
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'm trying to automatically login a user. The JavaScript code below here actually does that but only when I remove the 'login/submit' div (), and then stops working when I include the 'div'. I can't remove this 'div' as that is my submit button. I don't know how to get around this problem, any help will be appreciated.
HTML;
<body>
<form name="EventConfirmRedirection" class="Form" method="post" action="index.php" id="myForm" data-ajax="false">
<div class="user_login3"><input style="text-transform:lowercase" type="text" name="username" id="username" placeholder="username"></div>
<div class="user_login3"><input type="password" name="password" id="password" placeholder="password"></div>
<div style="margin-left:5%; width:45%; font-size:5px;">
<input data-theme="c" type="checkbox" id="rememberMe" name="rememberMe"/>
<label for="rememberMe"><span style="font-size:12px">remember me</span></label>
</div>
<div style="margin-left:5%; color:#FF0000; font-weight:bold" id="error"></div>
<div class="login"><input type="submit" value="LOGIN" name="submit" data-theme="e" id="submit"></div>
</form>
</body>
JAVASCRIPT;
$(document).ready(function() {
"use strict";
if (window.localStorage.checkBoxValidation && window.localStorage.checkBoxValidation !== '') {
$('#rememberMe').attr('checked', 'checked');
$('#username').val(window.localStorage.userName);
$('#password').val(window.localStorage.passWord);
document.EventConfirmRedirection.submit();
} else {
$('#rememberMe').removeAttr('checked');
$('#username').val('');
$('#password').val('');
}
$('#rememberMe').click(function() {
if ($('#rememberMe').is(':checked')) {
// save username and password
window.localStorage.userName = $('#username').val();
window.localStorage.passWord = $('#password').val();
window.localStorage.checkBoxValidation = $('#rememberMe').val();
} else {
window.localStorage.userName = '';
window.localStorage.passWord = '';
window.localStorage.checkBoxValidation = '';
}
});
});
AJAX
$(document).ready(function() {
"use strict";
$("#submit").click( function(e) {
e.preventDefault();
if( $("#username").val() === "" || $("#password").val() === "" )
{
$("div#error").html("Both username and password are required");
} else {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(data) {
$("div#error").html(data);
});
$("#myForm").submit( function() {
return false;
});
}
});
});
"submit is not a function" means that you named your submit button or some other element submit. Rename the button to btnSubmit and your call will magically work. Any of the form element name and id should not be submit, otherwise form.submit will refer to that element rather than submit function.
When you name the button submit, you override the submit() function on the form.
So changing the div/submit like this will work for you
<div class="login"><input type="submit" value="LOGIN" name="btnSubmit" data-theme="e" id="btnSubmit"></div>
And if you don't want to change the button name then you might call the submit function natively aswell, which looks a bit dirty..
document.EventConfirmRedirection.prototype.submit.call(document.EventConfirmRedirection);
//or
document.EventConfirmRedirection.prototype.submit.call($('#myForm')[0]);
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
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*');
}
});
});