Frnds i need some help..
In this code i have validated the 2 textboxes.
The help i need is once no data has been entered in the boxes the form should not goto check.php but with an javascript alert: Invalid Data
I need this in Javascript...
function f1()
{
var v1=document.getElementById("uname").value;
var v2=document.getElementById("pass").value;
if(v1=="" || v2=="")
alert("Please Fill It..!");
}
Username:<input type="text" id="uname" placeholder="username" title="Enter your Username" name="uname"/>
Password:
<input type="password" id="pass" placeholder="password" title="Enter your password" name="pass"/>
<input type="submit" value="Login"/>
<input type="reset" value="clear"/>
</form>
Try this:
function f1()
{
var v1=document.getElementById("uname").value;
var v2=document.getElementById("pass").value;
if(v1=="" || v2=="")
{
alert("Please Fill It..!");
return false;
}
}
The problem with your function is that by default it returns true and form is submitted. You need to return false in order to prevent form submit.
you need to register your f1() as form onSubmit event handler.
<form action="formaction" method="post" onsubmit="f1()">
Username:<input type="text" id="uname" placeholder="username" title="Enter your Username" name="uname"/>
Password:
<input type="password" id="pass" placeholder="password" title="Enter your password" name="pass"/>
<input type="submit" value="Login"/>
<input type="reset" value="clear"/>
</form>
function f1()
{
var v1=document.getElementById("uname").value;
var v2=document.getElementById("pass").value;
if(v1=="" || v2=="") return false;
}
You can use the attribute onSubmit which will run the javascript in it. If it returns a falsy value, the submit won't be made, but if it returns true, the submit will be made.
<form method="POST" onSubmit="return f1()">
Username:<input type="text" id="uname" placeholder="username" title="Enter your Username" name="uname"/>
Password:
<input type="password" id="pass" placeholder="password" title="Enter your password" name="pass"/>
<input type="submit" value="Login"/>
<input type="reset" value="clear"/>
</form>
f1 has to be a function that returns true or false
Related
I need to help. I have a next form
<form action="" method="POST">
<input type="email" name="email">
<input type="email" name="email-repeat">
<input type="password" name="password">
<input type="password" name="password-repeat">
<input type="submit" value="">
</form>
and I want when I reload to page, that browser to autocomplete all fields from saved data in the browser(email and password) twice password and twice email. I tried a few combinations with attribute of autocomplete, but nothing.
You should add autocomplete="off" to the inputs that you don't want to be filled automatically.
<input autocomplete="off" type="email" name="email">
<input autocomplete="off" type="email" name="email-repeat">
<input autocomplete="off" type="password" name="password">
<input autocomplete="off" type="password" name="password-repeat">
<input type="submit" value="">
You can find details in MDN
I have the following html:
<form >
<input type="text" name="username" id="username" value="" placeholder="User name" />
<input type="password" name="password" id="password" value="" placeholder="Password" />
<input type="password" name="password" id="confirm_password" value="" placeholder="Confirm Password" />
<input type="email" name="email" id="email" value="" placeholder="Email" />
<input type="text" name="firstname" id="firstname" value="" placeholder="First name" />
<input type="text" name="lastname" id="lastname" value="" placeholder="Last name" />
<input type="date" name="date" id="date" placeholder="date" />
<ul class="actions align-center">
<li><input type="submit" value="Register" id="register" disabled="disabled"/></li>
</ul>
</form>
Also the following javascript:
(function() {
$('form input').keyup(function() {
var empty = false;
$('form input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
I can get button to be disabled then enabled without date input, but as soon as i put in the date input, the button does not become enabled. Why is this?
Edit: it works but user has to type in date, but how can i enable it when user just selects date by clicking?
jsfiddle link
It's because you are using the keyup event but when you click a date, that's not a key up event. This can be solved by changing keyup to change.
$('form input').change(function() {
https://jsfiddle.net/hn6tf36L/1/
I'm having errors in validation of my form.
Here's the javascript:
function ValidateForm(){
email=document.getElementbyId("email").value;
confirmemail=document.getElementById("confirmemail").value;
password=document.getElementById("password").value;
confirmpassword=document.getElementById("confirmpassword").value;
errors = " ";
if (email == " ") {
erros += "Please enter your email \n";
}
emailcheck = /^.+#.+\..{2,4}$/;
if (email.match(emailcheck)) { }
else {
errors += "Please check your email \n";
}
if (email.match(confirmemail)) {}
else {
errors += "Email don't match \n";
}
if ( errors != "") {
alert(errors);
}
else { }
}
And here's the form part of HTML:
<form action="/LoginData/" method="post">
<label>Email</label>
<input id="email" type="email" autocomplete="on" placeholder="Your email id" name="email" required>
<label>Confirm Email</label>
<input id="confirmemail" type="email" autocomplete="off" placeholder="Confirm your Email id" name="confirmemail" required>
<br/>
<br/>
<label>Password</label>
<input id="password" type="password" name="password" placeholder="Password" required>
<label>Confirm Password</label>
<input id="confirmpassword" type="password" name="confirmpassword" placeholder="Confirm your Password" required>
<br/>
<br/>
<input type="submit" name="submit" value="Create Account">
</form>
It doesn't show the alert message even if i fill the fields with wrong input.
(Note: i'm using external JavaScript file)
I'm using the javascript for IE8 because i want to make the webpage run properly on it.
And it doesn't show the alert for any of the fields in IE.
A example of what i'm trying to build: 1http://aharrisbooks.net/jad/chap_07/validate.html
You need to call ValidateForm() in you code.
In this scenario calling it on submit will be the best option something like onsubmit="return validateForm()";
Also it has camel case problem. Should be getElementById instead of getElementbyId. Check your syntax Errors in browser console.
You must put
onsubmit="return validateForm()"
So
<form action="/LoginData/" method="post" onsubmit="return validateForm()">
<label>Email</label>
<input id="email" type="email" autocomplete="on" placeholder="Your email id" name="email" required>
<label>Confirm Email</label>
<input id="confirmemail" type="email" autocomplete="off" placeholder="Confirm your Email id" name="confirmemail" required>
<br/>
<br/>
<label>Password</label>
<input id="password" type="password" name="password" placeholder="Password" required>
<label>Confirm Password</label>
<input id="confirmpassword" type="password" name="confirmpassword" placeholder="Confirm your Password" required>
<br/>
<br/>
<input type="submit" name="submit" value="Create Account">
</form>
in the form tag in order to use your custom validation before submitting data.
You currently use HTML5 validation tag's so even if your cusom JS function is not called, you should see HTML5 validation with new browsers. You can see browsers that are more compliant than others with HTML5 : http://caniuse.com/#search=html5.
I have a form
<form name="loginForm" method="POST">
Username: <input type="text" name="username" value="" />
<br />
Password: <input type="password" name="password" value="" />
<input type="submit" name="submitButton" />
</form>
How do I take the information above after hitting the submit button, and do something with said data? Such as,
<script>
function checkLogin(){
//some code here
}
</scipt>
I really want to know how to use the SUBMIT button, and not just onClick.
Use the onSubmit event:
HTML:
<form name="loginForm" method="POST" onsubmit="checkLogin()">
Username: <input type="text" name="username" value="" />
<br />
Password: <input type="password" name="password" value="" />
<input type="submit" name="submitButton" />
</form>
Script:
function checkLogin(){
// If you return "false" it will stop the form from being submitted
}
You could specify an onsubmit function for your form.
<form name="loginForm" method="POST" onsubmit="checkLogin()">
Then in your function, something like:
function checkLogin() {
var username = document.forms["loginForm"]["username"];
// validate the form. Return false and the form will not be posted to server.
}
You will use $.post in the following way {
$.post(URL_TO_YOUR_SCRIPT, { username: $("#username").val(),
password: $("#password).val() },
function(data) {
alert(data);
});
to achieve this, you will have to give ID's to your input boxes like
<input type="text" name="username" id="username" />
<input type="password" name="password" id="password" />
Cheers!
I want to stay on the current page, if the "Name" input field is empty.
Right now, it shows the error message, and when you click ok, it still goes to the next page (contactcaptcha.php).
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus();
return false;
}
return true;
}
<form id="action" action="contactcaptcha.php" method="post">
<fieldset>
<textarea id="message" name="Message" placeholder="What's on your mind?"></textarea>
<input id="Name" name="Name" placeholder="Enter your full name" type="text">
<input id="Email" name="Email" placeholder="Enter your email address" type="email">
<input type="submit" onclick="notEmpty(document.getElementById('Name'), 'Please enter your name')" name="submit" value="Send your message">
</fieldset>
try like so, returning your function at submit event of the form element
<form id="action" action="contactcaptcha.php" method="post"
onsubmit="return notEmpty(document.getElementById('Name'), 'Please enter your name')">
<fieldset>
...
<input type="submit" name="submit" value="Send your message">
</fieldset>
</form>
Misssing return keyword:
<input type="submit"
onclick="return notEmpty(document.getElementById('Name'), 'Please enter your name')"
name="submit" value="Send your message">
As you use HTML5 anyway, you might want to use the required attribute: http://www.w3schools.com/html5/att_input_required.asp
<form>
<input id="message" required>
<input type="submit" value="Submit">
</form>