I am very new to coding and just trying to learn how to make a simple validation, to check if text box is filled in or not, but it never seems to work for me... This is my code:
Html:
Username:<br/>
<input type="text" placeholder="Username" id="uname">
<input type="submit" id="check" value="OK" onclick="check()">
Javascript:
//IF TEXT BOX EMPTY, DISPLAY ALERT MESSAGE.
function check(){
var uname=document.getElementById(uname).value;
if (uname==""){
alert("Username is obligatory")
}
}
You have a few problems in your markup and script:
You're missing quotes around uname .getElementById("uname").value and your function won't stop the form from submitting if there are validation issues.
Here is the fix for the immediate problem and a simple solution to keep the form from submitting when there are validation issues.
<script>
function validateForm() {
var uname=document.getElementById("uname").value;
if (uname==""){
alert("Username is obligatory");
return false;
}
}
</script>
<form onSubmit="return validateForm()">
<input type="text" placeholder="Username" id="uname">
<input type="submit" id="check" value="OK">
</form>
Working Plnkr
Related
I want to get the user filled form and display their output.
So I tried this:
<form name="testForm">
<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc()">
</form>
<div id="demo"></div>
<script>
function myFunc(){
var x = document.getElementById('username').value;
document.write(x);
}
</script>
This works as intended. Now, I just want to change the way it displays by making it display in the div with the id demo.
So this is what I tried:
<form name="testForm">
<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc()">
</form>
<div id="demo"></div>
<script>
function myFunc(){
var x = document.getElementById('username').value;
document.getElementById('demo').innerHTML =x;
}
</script>
Now as you can see, this doesn't work. It actually displays the results and then reloads a blank screen. I can't seem to understand why this is happening.
From my code, I can see that I've assigned x to the username value. So all I am doing is instead of using document.write (which worked), I am just wanting it to display in the div. However it displays and loads a blank screen.
Can someone please let me know what am I doing wrong? How can I display under the div demo of what the user typed in for username field. Is it a syntax error?
ps: I am self learning and practicing, so I just tried to play with username. Once I do that I will apply the same codes for password.
you can use preventDefault() to stop submit button from submitting.
<form name="testForm">
<input type="text" name="username" id="username">
<br>
<input type="text" name="password" id="password">
<br>
<input type="submit" value="Submit" onClick="myFunc(event)">
</form>
<div id="demo"></div>
<script>
function myFunc(event){
event.preventDefault();
var x = document.getElementById('username').value;
document.getElementById('demo').innerHTML =x;
}
</script>
You need to prevent form submission.
Change myFunc to:
function myFunc (evt) {
evt.preventDefault();
// everything else
}
I'm having to dip my toe back in the EE and javascript world after many years. What am I doing wrong here... a simple form being submitted, with a JS block to validate during the onsubmit event of the submit button. The alert("Here") message box does not appear when I submit the form, and the form gets submitted successfully, i.e. HelloForm gets displayed, with blank values, so I'm led to believe that validate() is not being called. I've tried this in both the Eclipse internal web browser as well as Chrome and see the same thing both times. I'm assuming that I don't need to explicitly activate javascript in either browser, as it would be on by default.
<html>
<head>
<script>
function validate()
{
alert("Here");
var x = document.forms["inputForm"].["first_name"].value;
if (x == null || x == "") {
alert("First name must be filled out");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="inputForm" action="HelloForm" method="GET" onsubmit="return validate()">
First Name: <input type="text" name="first_name">
<br />
Last Name: <input type="text" name="last_name" />
<input type="submit" value="Submit The Form" />
</form>
</body>
</html>
In this line will throw a syntax error:
document.forms["inputForm"].["first_name"].value
^^^
The statement is wrong, should be without dot between braces:
document.forms["inputForm"]["first_name"].value
//or
document.forms.inputForm.first_name.value
Working with Objects
You can use Html5 Validations.
<form name="inputForm" action="HelloForm" method="GET" >
First Name: <input type="text" name="first_name" required />
<br />
Last Name: <input type="text" name="last_name" required />
<input type="submit" value="Submit The Form" />
</form>
Working Demo
<script>
function valid() {
document.getElementById("name").style.borderColor = "#ef0000";
}
</script>
<form method="post" action="">
<input type="text" name="name" id="name">
<input type="submit" onclick="valid()" value="click">
</form>
why on earth this code doesn't work? I se eonly blick of red and the border is in its initial state again. I beg your pardon guys, really.I know it's a duplicate (I have even found at least one working solution here: http://jsfiddle.net/bcxLz4wh/ ) I jsut wanna know what's wrong with my code and why it returns to its initial state.
It returns to it initial state because you are clicking on a submit button. It's default behaviour is to submit the form which refreshed the page. If you want to only change the border-color you need to override that default behaviour.
Something like:
function valid(e) {
document.getElementById("name").style.borderColor = "#ef0000";
e.preventDefault();
}
<form method="post" action="">
<input type="text" name="name" id="name">
<input type="submit" onclick="valid(event)" value="click">
</form>
I have added some javascript to my form to validate the email before submitting the form. I dont want a seperate button to validate, i want it to be part of the form submit button. It works currently and a message comes up asking me to put a valid email address in. The problem is when i click "ok" it still tries to submit the form (and fails) instead of returning to the form to correct the email addres.
My Javascript:
<script language="javascript">
function checkEmail() {
var email = document.getElementById('txtEmail');
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert('Please provide a valid email address');
email.focus;
return false;
}
}</script>
My HTML:
<input type="text" name="email" id="txtEmail" />
<input type="SUBMIT" class="button" value="Submit Email" onclick='Javascript:checkEmail();' />
I cant figure out what the problem is. Any help would be appreciated. Cheers
Just add return before the function call:
<input type="SUBMIT" class="button" value="Submit Email" onclick='Javascript:return checkEmail();' />
Try this:
HTML:
<form name="whatever" action="action.asp" onsubmit="return validateForm()" method="post">
<input type="text" name="email" id="txtEmail" />
<input type="SUBMIT" class="button" value="Submit Email" />
</form>
JS (pseudocode)
function validateForm()
{
if (something) {
alert('validation failed');
return false;
}
}
There is not a major problem, the function is working fine but it is not returning back,
just add return before you call the function,
here is the example below:
<input type="SUBMIT" class="button" value="mail" onclick='Javascript:return checkEmail();' />
This will sort out your problem,
enjoy :)
Here is the rework of your code.
<script type="text/javascript">
function checkEmail() {
var email = document.getElementById('txtEmail');
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert('Please provide a valid email address');
email.focus;
return false;
}
}
</script>
<input type="text" name="email" id="txtEmail" />
<input type="SUBMIT" class="button" value="Submit Email" onclick='checkEmail();' />
Works as expected.
This is my Html code:
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
function logiin()
{
name_sent = document.getElementById('username').value;
pass_sent = document.getElementById('pass').value;
$.post(
'login.php',
{
name: name_sent
},
function show(data) {alert (data); }
);
}
</script>
</head>
<body>
<!--<form>-->
Username: <input type="username" name="username" id="username"> <br>
Pass: <input type="password" name ="pass" id="pass"> <br>
<input type="submit" onclick="logiin();">
<!--</form>-->
</body>
It works with ajax and JQuery and works very well, too! :) But if i add form tag it doesn't work! why.?
It's not working because, when contained in a form, the submit button will try to submit the form.
The easiest way to prevent that from happening is to add return false; to the onclick handler:
<input type="submit" onclick="logiin(); return false;" />
The better way, though, would be to add the handler to the form itself (in case the user submits the form another way):
<form onsubmit="logiin(); return false;">
<!-- Form elements here -->
</form>
Just disable submit. If there is no button with type as submit, the form won't be submitted, unless you do it in your JavaScript code explicitly.
<body>
<form>
Username: <input type="username" name="username" id="username"> <br>
Pass: <input type="password" name ="pass" id="pass"> <br>
<input type="button" onclick="logiin();">
</form>
</body>
Probably because you are using an input button of type submit. Try using input of type button.
<input type="button" onclick="logiin();">
A button of type submit will automatically try to submit the form using post. See w3c Schools for more information.