Please correct the below code it is not working as expected i.e, i need a error message to be shown just beside the textfield in the form when user enters an invalid name
<html>
<head>
<script type="text/javascript">
function validate() {
if(myform.fname.value.length==0)
{
document.getElementById("fname").innerHTML="this is invalid name ";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
Try this code
<html>
<head>
<script type="text/javascript">
function validate() {
if(myform.fname.value.length==0)
{
document.getElementById('errfn').innerHTML="this is invalid name";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input><div id="errfn"> </div>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
I m agree with #ReNjITh.R answer but If you want to display error message just beside textbox. Just like below
<html>
<head>
<script type="text/javascript">
function validate()
{
if(myform.fname.value.length==0)
{
document.getElementById('errfn').innerHTML="this is invalid name";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()" /><span id="errfn"></span>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"/><br>
<input type=button value=check />
</form>
</body>
web masters or web programmers, please insert
<!DOCTYPE html>
at the start of your page. Second you should enclose your attributes with quotes like
type="text" id="fname"
input element should not contain end element, just close it like:
/>
input element dont have innerHTML, it has value sor your javascript line should be:
document.getElementById("fname").value = "this is invalid name";
Please write in organized way and make sure it is convenient to standards.
you can try it like this
<html>
<head>
<script type="text/javascript">
function validate()
{
var fnameval=document.getElementById("fname").value;
var fnamelen=Number(fnameval.length);
if(fnamelen==0)
{
document.getElementById("fname_msg").innerHTML="this is invalid name ";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input>
<span id=fname_msg></span>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
You can also try this
<tr>
<th>Name :</th>
<td><input type="text" name="name" id="name" placeholder="Enter Your Name"><div id="name_error"></div></td>
</tr>
function register_validate()
{
var name = document.getElementById('name').value;
submit = true;
if(name == '')
{
document.getElementById('name_error').innerHTML = "Name Is Required";
return false;
}
return submit;
}
document.getElementById('name').onkeyup = removewarning;
function removewarning()
{
document.getElementById(this.id +'_error').innerHTML = "";
}
First you are trying to write to the innerHTML of the input field. This will not work. You need to have a div or span to write to. Try something like:
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input>
<div id="fname_error"></div>
Then change your validate function to read
if(myform.fname.value.length==0)
{
document.getElementById("fname_error").innerHTML="this is invalid name ";
}
Second, I'm always hesitant about using onBlur for this kind of thing. It is possible to submit a form without exiting the field (e.g. return key) in which case your validation code will not be executed. I prefer to run the validation from the button that submits the form and then call the submit() from within the function only if the document has passed validation.
Try like this:
function validate(el, status){
var targetVal = document.getElementById(el).value;
var statusEl = document.getElementById(status);
if(targetVal.length > 0){
statusEl.innerHTML = '';
}
else{
statusEL.innerHTML = "Invalid Name";
}
}
Now HTML:
<!doctype html>
<html lang='en'>
<head>
<title>Derp...</title>
</head>
<body>
<form name="myform">
First_Name
<input type="text" id="fname" name="fname" onblur="validate('fname','fnameStatus')">
<br />
<span id="fnameStatus"></span>
<br />
Last_Name
<input type="text" id="lname" name="lname" onblur="validate('lname','lnameStatus')">
<br />
<span id="lnameStatus"></span>
<br />
<input type=button value=check>
</form>
</body>
</html>
You should use .value and not .innerHTML as it is a input type form element
<html>
<head>
<script type="text/javascript">
function validate() {
if(myform.fname.value.length==0)
{
document.getElementById("fname").value="this is invalid name ";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
Setting innerHtml of input value wont do anything good here, try with other element like span, or just display previously made and hidden error message.
You can set value of name field tho.
<head>
<script type="text/javascript">
function validate() {
if (myform.fname.value.length == 0) {
document.getElementById("fname").value = "this is invalid name ";
document.getElementById("errorMessage").style.display = "block";
}
}
</script>
</head>
<body>
<form name="myform">First_Name
<input type="text" id="fname" name="fname" onblur="validate()"></input> <span id="errorMessage" style="display:none;">name field must not be empty</span>
<br>
<br>Last_Name
<input type="text" id="lname" name="lname" onblur="validate()"></input>
<br>
<input type="button" value="check" />
</form>
</body>
FIDDLE
try this
<html>
<head>
<script type="text/javascript">
function validate() {
if(myform.fname.value.length==0)
{
document.getElementById("error").innerHTML="this is invalid name ";
document.myform.fname.value="";
document.myform.fname.focus();
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type="text" id="fname" name="fname" onblur="validate()"> </input>
<span style="color:red;" id="error" > </span>
<br> <br>
Last_Name
<input type="text" id="lname" name="lname" onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
You should place your script code after your HTML code and within your body tags. That way it doesn't run before the html code.
Related
I want to user to press submit button so that their name and age is displayed in the input box with name="output"?
I have 3 input boxes, one asking for name and the other for age while the other one provides output. I am trying to use the function output() to display the last input box.
I am confused about where I am going wrong, do I need a .value?
<!doctype html>
<html>
<head>
<style>
.formdiv{
align: center;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function output(){
var name = getElementByName('firstName');
var Age= getElementByName('age');
var out = document.write(name+Age);
document.getElementByName('output') = out;
}
</script>
<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset><center>
<legend> Enter the following Info:</legend>
<br />
<label> Name </label>
<input type="text" name="firstName" placeholder="John" required="required"></input>
<br/>
<br/>
<label>Age </label>
<input type="number" name="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
<button onClick="output()">Submit</button><br/>
<label for="output">Output</label>
<br/>
<input type="textbox" name="output"></input>
</center>
</div>
</body>
</html>
Here's a working version of your code.
There's no method getElementByName (but getElementsByName) - you should use document.getElementById() (Read about it here)
You should use the value of the input element.
<!doctype html>
<html>
<head>
<style>
.formdiv{
align: center;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function output(){
var name = document.getElementById('firstName').value;
var Age= document.getElementById('age').value;
document.getElementById('output').value = name+Age;
}
</script>
<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset><center>
<legend> Enter the following Info:</legend>
<br />
<label> Name </label>
<input type="text" id="firstName" placeholder="John" required="required"></input>
<br/>
<br/>
<label>Age </label>
<input type="number" id="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
<button onClick="output()">Submit</button><br/>
<label for="output">Output</label>
<br/>
<input type="textbox" id="output"></input>
</center>
</div>
</body>
</html>
getElementsByName (note: Elements, not Element) returns a list of Elements, in this case your <input>s. So first of all, you need to select the first (in your case your only one) using getElementsByName(...)[0]. Then you get one Element.
However you do not want to output the entire element (which is an Object, not a String, and converted to a string it likely won't be what you expect), so you need to select the value property of that Element. So yes, you need to add .value, just as you assumed:
function output(){
var name = getElementsByName('firstName')[0].value;
var Age= getElementsByName('age')[0].value;
Then, document.write writes the argument to a new document directly, which results in an emtpy page with nothing else on it but that string. This isn't what you want, so you don't need that. ALl you do want is to assign a new variable called out with that string:
var out = name+Age;
Then to assigning the new value to the output field - you don't want to replace the Element by a string (that wouldn't even work), but it's value, so you need the .value again:
document.getElementsByName('output')[0].value = out;
}
That should do the trick.
(In addition to that, you might want to use name + " " + Age instead of simply name+Age, as otherwise you end up with "John Doe23" instead of "John Doe 23" which you likely want)
There are a few things wrong with your code:
there is no such thing as getElementByName - it is getElementById
changing to the above, you need to add ids to your input elements
you need to use the value of the returned object from getElementById
The above will get your code working, but also, the center tag is obsolete and you shouldn't use it
Inputs are self closing tags so you don't need </input>
<!doctype html>
<html>
<head>
<style>
.formdiv {
align: center;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
function output() {
var name = document.getElementById('firstName').value;
var Age = document.getElementById('age').value;
var out = name + Age;
document.getElementById('output').value = out;
}
</script>
<h1><strong><em><center>Payment Details</center></em></strong> </h1>
<div class="formdiv">
<fieldset>
<center>
<legend>Enter the following Info:</legend>
<br />
<label>Name</label>
<input type="text" name="firstName" id="firstName" placeholder="John" required="required"></input>
<br/>
<br/>
<label>Age</label>
<input type="number" name="age" id="age" maxlength="2" required="required"></input>
</fieldset>
</center>
</div>
<div>
<center>
<button onClick="output()">Submit</button>
<br/>
<label for="output">Output</label>
<br/>
<input type="textbox" name="output" id="output"></input>
</center>
</div>
</body>
</html>
I have an form, like this
<form>
<input type="text" id="abc" name="abc" value="abc"><img src="right.png">
<input type="text" id="abc1" name="abc" value=""><img src="wrong.png">
<input type="submit" id="submit" value="submit">
</form>
but I don't understand how to show this. When the input is not empty <img src="right.png"> and if it is empty then <img src="wrong.png">
Mark your input required and add some CSS, like this:
input:required:valid::after{
content: url(path/to/right.png);
}
input:required:invalid::after{
content: url(path/to/wrong.png);
}
<input type="text" required="required" minlength="1">
Fall back on #divy3993's if you have to support some horrible old browser
I would go with #dtanders but still a simple solution with JavaScript would not harm you.
function myFunction() {
var x = document.getElementById("abc");
var curVal = x.value;
var imageRW = document.getElementById('img_right_wrong');
if (curVal == "")
{
//wrong.png
imageRW.src = "http://findicons.com/files/icons/1671/simplicio/128/notification_error.png";
}
else
{
//right.png
imageRW.src = "https://d3n7l4wl5znnup.cloudfront.net/assets/images/icon-right.png";
}
}
<form>
<input type="text" id="abc" onkeyup="myFunction()" name="abc" value="">
<img src="http://findicons.com/files/icons/1671/simplicio/128/notification_error.png" id="img_right_wrong" width="2%">
<input type="submit" id="submit" value="submit">
</form>
Update:
Working Fiddle
Seems that you want to do dynamic form validation. So you can add event listener And JavaScript:
function checkInput() {
if ($("#abc").val().length == 0) {
// change image
}
}
<input id="abc" name="abc" onchange="checkInput()">
But using jQuery plugin is better:
link (EDIT: this link is dead, but it can be found on the Wayback Machine)
This can be done easily in angularjs using ng-show.
<!DOCTYPE HTML>
<HTML>
<head>
<title>Chat Application</title>
<script src="./scripts/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
</head>
<body ng-app="chatApp">
<div>
<input type="text" name="FirstName" ng-model="text" ng-init='text=""'>
<br />
<img src="right.png" alt="right" ng-show="text.length >0">
<img src="wrong.png" alt="wrong" ng-show="text.length === 0">
<input type="submit" id="submit" value="submit">
</div>
<script src="./scripts/app.js"></script>
</body>
</html>
I'm a beginner, and I need some help with my assignment. I can't work out what I've done wrong. The label and submit button appear in html, but when I click on the submit button it doesn't validate the form.
My assignment is to produce a form to enter your name. Onsubmit a function to validate the name is called that will validate that the name cannot be blank and must be more than 6 characters.
<html>
<head>
<body>
<form name="myForm" autocomplete="on" onsubmit="return validateForm()">
<p><label>First name (required) <input type="text" id="firstName"
autofocus="autofocus" /> </label></p>
</form>
<input type="submit" name="S1" value="Submit response" />
<script>
function validateForm(){
var firstName=document.getElementById("firstName");
if (firstName.value.length<6){
alert("Please enter your first name (6 characters or more)");
firstName.focus();
return false;
}
alert("Thank you for your submission");
return true;
}
</script>
</body>
</head>
</html>
Place submit button inside of form tag
function validateForm() {
var firstName = document.getElementById("firstName");
if (firstName.value.length < 6) {
alert("Please enter your first name (6 characters or more)");
firstName.focus();
return false;
}
alert("Thank you for your submission");
return true;
}
<html>
<head>
<body>
<form name="myForm" autocomplete="on" onsubmit="return validateForm()">
<p><label>First name (required)<input type="text" id="firstName"
autofocus="autofocus" /> </label></p>
<input type="submit" name="S1" value="Submit response" />
</form>
</body>
</head>
</html>
The problem with your code is that you try to return a result to an event. Events do not accept any response. So try this;
<html>
<body>
<form name="myForm" autocomplete="on" onsubmit="validateForm()">
<p>
<label>First name (required)</label>
<input type="text" id="firstName" autofocus="autofocus" />
</p>
<input type="submit" name="S1" value="Submit response" />
</form>
<script>
function validateForm(){
var firstName=document.getElementById("firstName");
if (firstName.value.length<6){
alert("Please enter your first name (6 characters or more)");
firstName.focus();
return false;
}
alert("Thank you for your submission");
document.getElementsByTagName("form")[0].submit()
}
</script>
</body>
</html>
Besides that, you put your body in your head, this can cause trouble with some browsers.
Your submit button is outside of form tag, that's why the onsubmit method is not gettting called.
Problem was in your code. Remember you have to put submit button under <form></form> tag. And always put JS code in <head></head> section.
Find below code and try hope this will work for you.
<html>
<head>
<script>
function validateForm() {
var firstName = document.getElementById("firstName");
if (firstName.value.length < 6) {
alert("Please enter your first name (6 characters or more)");
firstName.focus();
return false;
}
alert("Thank you for your submission");
return true;
}
</script>
</head>
<body>
<form name="myForm" autocomplete="on" onsubmit="return validateForm();">
<p><label>First name (required) <input type="text" id="firstName"
autofocus="autofocus" /> </label></p>
<input type="submit" name="S1" value="Submit response" />
</form>
</body>
</html>
<title>Javascript</title>
<script>
function buttonreport(id,name,address){
var userid ="Id:"+id;
var username="Name :"+name+"\n";
var useraddress ="Address:"+address+"\n";
alert(userid+username+useraddress);
}
</script>
</head>
<body>
ID:<input type="text" name="id"/><br/>
NAME:<input type="text" name="name"/><br/>
ADDRESS:<input type="text" name="address"/><br/>
<input type="submit" value="Submit" onclick="buttonreport(this.id,this.name,this.address)"/>
</body>
now its working but output shows as id:name:address no entered values are displayed
You spelled alert wrong in your script
I'm not JS expert, but maybe You need <form> tags around submit form. You could also just use getelementbyid.
your alret should be alert. now it works :)
<title>Javascript</title>
<script>
function buttonreport(id,name,address){
var userid ="Id:"+id;
var username="Name :"+name+"\n";
var useraddress ="Address:"+address+"\n";
alert(userid+username+useraddress);
}
</script>
</head>
<body>
ID:<input type="text" name="id"/><br/>
NAME:<input type="text" name="name"/><br/>
ADDRESS:<input type="text" name="address"/><br/>
<input type="submit" value="Submit" onclick="buttonreport(this.id,this.name,this.address)"/>
I want to copy data from one text box to another in html automatically ie., as I edit the first text box the second one should reflect the same spontaneously
call javascript function on onkeypresss
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("copy_to").value=a
}
EDITED USE onkeyup or onblur instead
<html>
<head>
<script>
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("copy_to").value=a
}
</script>
</head>
<body>
<input type="text" name ="a" id="copy_from" onkeyup="copy_data(this)"/>
<input type="text" name ="a" id="copy_to"/>
</body>
</html>
In jQuery, something like this:
$("#txtBox1").keypress(function() {
$("#txtBox2").val($(this).val());
}
You do easily with JQuery:
<input type="text" id="box1" />
<input type="text" id="box2" />
<script type="text/javascript">
$(function(){
$("#box1").keypress(function()
{
$("#box2").val($(this).val());
}
});
</script>
You can achieve by this...
function FillBilling(f) {
if(f.billingtoo.checked == true) {
f.billingname.value = f.shippingname.value;
f.billingcity.value = f.shippingcity.value;
}
}
To add more fields, just add to the parameters shown above...like this:
f.billingstate.value = f.shippingstate.value;
f.billingzip.value = f.shippingzip.value;
The HTML for the form you will use looks like this:
<b>Mailing Address</b>
<br><br>
<form>
Name:
<input type="text" name="shippingname">
<br>
City:
<input type="text" name="shippingcity">
<br>
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">
<em>Check this box if Billing Address and Mailing Address are the same.</em>
<P>
<b>Billing Address</b>
<br><br>
Name:
<input type="text" name="billingname">
<br>
City:
<input type="text" name="billingcity">
</form>