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
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've the below data in html.
#Html.BeginForm("LoginDetails", "Home", FormMethod.Post){
<body onload="makeCalls()" style="background-image: url('../../ImageIcons/FaceLoginBG.jpg'); background-size: cover; visibility:hidden">
<div class="captureAndCompareWindowForLogin" style="display: block; margin-left: auto;margin-right: auto;float: none;">
<div class="centerTitle">
<h3 style="color:white">Welcome</h3>
</div>
<div class="errText" id="errText" value="errText" visibility:hidden">Invalid Username and Password</div>
<form name="loginForm" id="loginForm">
#Html.Label("Username") <input type="text" id="userid" name="userid"/><br /><br />
#Html.Label("Password") <input type="password" id="pswrd" name="pswrd"/><br /><br />
<input type="button" id="btnLogin" onclick="check()" value="Login" class="btn-block">
</form>
</div>
<script type="text/javascript">
function check() {
/* the following code checkes if user is given access */
var userNameFromForm = document.getElementById("userid").value;
var passwordFromForm = document.getElementById("pswrd").value;
var lower = userNameFromForm.toLowerCase();
if (userNameFromForm === "") {
alert("please enter your username");
}
if (passwordFromForm === "") {
alert("please enter your password");
}
//Display error message, reset the form and select the userid textbox
else {
console.log(document.getElementById("loginForm"));
document.getElementById("loginForm").submit();
}
}
</script>
</body>
}
when I click the button, without blank username and password, it is giving me the appropriate alert message, but, filled username and password and hit submit is giving me the below error.
LoginHome:142 Uncaught TypeError: Cannot read property 'submit' of null.
please let me know where am I going wrong and how can I fix it.
Thanks
In your case, problem is that you wrapping form inside another form. Please use it like that:
<body onload="makeCalls()" style="background-image: url('../../ImageIcons/FaceLoginBG.jpg'); background-size: cover; visibility:hidden">
<div class="captureAndCompareWindowForLogin" style="display: block; margin-left: auto;margin-right: auto;float: none;">
<div class="centerTitle">
<h3 style="color:white">Welcome</h3>
</div>
<div class="errText" id="errText" value="errText" visibility:hidden">Invalid Username and Password</div>
#using (Html.BeginForm("LoginDetails", "Home", FormMethod.Post, new { id = "loginForm" }))
{
#Html.Label("Username") <input type="text" id="userid" name="userid" /><br /><br />
#Html.Label("Password") <input type="password" id="pswrd" name="pswrd" /><br /><br />
<input type="button" id="btnLogin" onclick="check()" value="Login" class="btn-block">
}
</div>
<script type="text/javascript">
function check() {
/* the following code checkes if user is given access */
var userNameFromForm = document.getElementById("userid").value;
var passwordFromForm = document.getElementById("pswrd").value;
var lower = userNameFromForm.toLowerCase();
if (userNameFromForm === "") {
alert("please enter your username");
}
if (passwordFromForm === "") {
alert("please enter your password");
}
//Display error message, reset the form and select the userid textbox
else {
console.log(document.getElementById("loginForm"));
document.getElementById("loginForm").submit();
}
}
</script>
</body>
Your code will submit form to Home/LoginDetails url. Your method in HomeController should be like this:
public ActionResult LoginDetails(string userid, string pswrd)
{
//do something
}
Get rid of the following:
#Html.BeginForm("LoginDetails", "Home", FormMethod.Post)
Or
You can use following instead, after deleting the 'LoginDetails' forms tag.
document.getElementById("LoginDetails").submit();
I have tried adding and removing contact fields and got it down to two for troubleshooting. I have tried it in multiple browsers but I can't seem to get an alert. Just looking to be pointed int he right direction here, another set of eyes may help!
here is the HTML
<html>
<head>
<title> Sugar Shippers International Snacks</title>
<link rel="stylesheet" type="text/css" href="styletest.css" />
<script src="/validateInputtesting.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<h2>
Contact us!
</h2>
<form action="#" method="post" onsubmit="return ValidateInput()">
<label>Name: </label>
<input id="name" name="name" type="text">
<label>Email: </label>
<input id="email" name="email" type="text">
<input type="submit" value="Lets Go"
</form>
</div>
</div>
</body>
</html>
Here is the .JS
function ValidateInput() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if (name != '' && email != '') {
if (email.match(emailReg))
alert("Not a real Email address!");
return false;
}
alert("Missing feilds!");
return false;
}
add a > to the end of this line:
<input type="submit" value="Lets Go"
For the validation, personally i would do it like this:
<input id="email" type="email" name="email" placeholder="Email" required pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$">
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 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*');
}
});
});