I am new to UI design. I have created Captcha, Please anyone give me an idea to validate Captcha using JavaScript.Thanks in advance. I have added my code below.
Code for getting new Captcha:
<html>
<head>
<script language="javascript" type="text/javascript">
function getCaptcha() {
var chars = "0Aa1Bb2Cc3Dd4Ee5Ff6Gg7Hh8Ii9Jj0Kk1Ll2Mm3Nn4Oo5Pp6Qq7Rr8Ss9Tt0Uu1Vv2Ww3Xx4Yy5Zz";
var string_length = 5;
var captchastring = '';
for (var i=0; i<string_length; i++) {
var rnum = Math.floor(Math.random() * chars.length);
captchastring += chars.substring(rnum,rnum+1);
}
document.getElementById("randomfield").innerHTML = captchastring;
}
</script>
<style>
HTML Code:
</head>
<body onload="getCaptcha();">
<form name="randform">
<table style="border:1px solid #ecece4">
<tr><td colspan="2" align="center"><strong>Contact Us Form</strong></td></tr>
<tr><td>Enter Captcha Code</td><td><input type="text" id="txtcode"/></td></tr>
<tr>
<td>
</td>
<td>
<div id="captcha">
<div id="captcha_gen">
<label align="center" id="randomfield"></label>
</div>
</div><input type="button" value="Refresh" onClick="getCaptcha();"/></td></tr>
<tr><td colspan="2" align="center"><input type="button" value="Submit"/></td></tr>
</table>
</form>
</body>
<html>
function validateCaptcha()
{
var chr = document.getElementById("tbxCaptcha").value;
var cap = document.getElementById("randomfield").innerHTML;
if (chr==cap)
{
return true;
}
else
{
alert ("Please enter valid verification code");
return false;
}
}
Related
Hi guys im a grade 10 student and was asked to create a basic like calculator to solve for the area of the triangle, but i really dont know how.I can do it with the use of a radio button but my teacher said to do it without the radio input. My codes works fine but if i press clear and input a value to the base and height, it will say syntax error...please can you help me? also whenever i dont put a value on base and height,it says 0 instead of syntax error,so please help me....(also sorry about earlier, im just new to this site)
this is my code:
<html>
<head>
<title>hfsabfhsabfihs</title>
</head>
<body>
<script type="text/javascript">
<!--
function checkbutton() {
var num1 = document.getElementById("input1").value;
var num2 = document.getElementById("input2").value;
if (document.form1.checked == false) {
alert("Syntax Error")
} else {
alert(num1 * num2 / 2);
}
}
function clearbutton() {
document.form1.checked = false;
var num1 = document.getElementById("input1").value = "";
var num2 = document.getElementById("input2").value = "";
}
//-->
</script>
<form name="form1">
<table>
<tr>
<td>Base</td>
<td><input type="text" id="input1" /></td>
</tr>
<tr>
<td>Height</td>
<td><input type="text" id="input2" /></td>
</tr>
</table>
<input type="button" value="Compute" onclick="checkbutton()">
<input type="button" value="Clear" onclick="clearbutton()">
</body>
</html>
problem is on clear function function
function clearbutton()
{
// document.form1.checked= false;
var num1 = document.getElementById("input1").value="";
var num2 = document.getElementById("input2").value="";
}
you are getting this error because you have set a variable here i.e form1.checked. either remove this variable or change its value on calculation function
Hope the below code helps:
// vairbale
const baseInput = document.querySelector("#input1")
const heightInput = document.querySelector("#input2")
const coputeBTn = document.querySelector("#Compute")
const areaTriangle = (base, height) =>{
let total =""
let error = false
let errorMessage = ""
if(base != "" && height != ""){
error = false
total = base * height / 2
}else{
error = true
errorMessage = "Please fill all inputs."
return errorMessage
}
return total
}
// Calling Function
coputeBTn.addEventListener("click", ()=>{
console.log(areaTriangle(Number(baseInput.value), Number(heightInput.value)))
})
<!doctype HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form name="form1">
<table>
<tr>
<td>Base</td>
<td><input type="text" id="input1" /></td>
</tr>
<tr>
<td>Height</td>
<td><input type="text" id="input2" /></td>
</tr>
</table>
<input type="button" id="Compute" value="Compute">
<input type="button" value="Clear" onclick="clearbutton()">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="errorTable" class="alert alert-danger alert-warning">
<!-- Validating City START -->
<div id="divname">
<tr>
<td width="3"></td>
<td width="23"><span class="table_row_error_text"><img id="imgsum" src="/images/error.gif" class="image" style="display: none;" ></span> </td>
<td width="5"></td>
<td><span class="table_row_error_text"> <span id="errorsum" /></span> </td>
</tr>
</div>
<!-- Validating City ENDS -->
<!-- Validating Zip Code START -->
<div id="divtype">
<tr>
<td width="3"></td>
<td width="23"><span class="table_row_error_text"><img id="imgdesc" src="/images/error.gif" class="image" style="display: none;" ></span> </td>
<td width="5"></td>
<td><span class="table_row_error_text"> <span id="errordesc" /></span> </td>
</tr>
</div>
<!-- Validating Zip Code ENDS -->
</table> Summary:
<input id="summaryOfAlert" type="text" />
<br>
<br> Description:
<input id="textarea3" type="text" />
<br>
<br> Save:
<input type="submit" onClick="return validateText()" /> </body>
<script>
function validateText() {
alert("Hi");
var summary = document.getElementById("summaryOfAlert").value;
var description = document.getElementById("textarea3").value;
var letters = /^[A-Za-z0-9._\-,\s]+$/;
var j;
j = 0;
if (summary != "") {
if (!summary.match(letters)) {
document.getElementById('errorsum').innerHTML = "In Summary Please Enter Only A-Za-z0-9-,_.";
document.getElementById("divname").style.display = 'block';
document.getElementById("imgsum").style.display = 'block';
j++;
}
}
if (description != "") {
if (!description.match(letters)) {
document.getElementById('errordesc').innerHTML = "In Description Please Enter Only A-Za-z0-9-,_.";
document.getElementById("divtype").style.display = 'block';
document.getElementById("imgdesc").style.display = 'block';
j++;
}
}
if (j == 0) {
return true;
} else return false;
}
</script>
</html>
Above is a html/javascript code which I have developed for front end validation for special characters. it is working fine but my problem is whenever I entered special chars like <>%&(^ in both text fields and after submitting it is showing error message like as shown
In Summary Please Enter Only A-Za-z0-9-,.
In Description Please Enter Only A-Za-z0-9-,.
But when I removed special chars in one of the text fields and submitting the values again both error messages are displaying instead of only one error message
You are showing the messages but you are not hiding them anywhere. Try this:
if(!summary.match(letters)) {
document.getElementById('errorsum').innerHTML="In Summary Please Enter Only A-Za-z0-9-,_.";
document.getElementById("divname").style.display='block';
document.getElementById("imgsum").style.display='block';
j++;
} else {
document.getElementById('errorsum').innerHTML="";
document.getElementById("divname").style.display='none';
document.getElementById("imgsum").style.display='none';
}
And the same things for description. You could also make it a function so you don't have to write it twice.
Try This Code you should use else part to hide you message
function validateText() {
alert("Hi");
var summary = document.getElementById("summaryOfAlert").value;
var description = document.getElementById("textarea3").value;
var letters = /^[A-Za-z0-9._\-,\s]+$/;
var j;
j = true;
if(summary!="") {
if(!summary.match(letters)) {
document.getElementById('errorsum').innerHTML="In Summary Please Enter Only A-Za-z0-9-,_.";
document.getElementById("divname").style.display='block';
document.getElementById("imgsum").style.display='block';
j=false;
} else{j=true; document.getElementById("divname").style.display='none'; document.getElementById("imgsum").style.display='none';}
}
if(description!="") {
if(!description.match(letters)) {
document.getElementById('errordesc').innerHTML="In Description Please Enter Only A-Za-z0-9-,_.";
document.getElementById("divtype").style.display='block';
document.getElementById("imgdesc").style.display='block';
j=false;
else{ j =true; document.getElementById("divtype").style.display='none'; document.getElementById("imgdesc").style.display='none';}
}
}
return j;
}
</script>
I'm making this calculator and have no idea why nothing comes into tulos box. Here is the code, I hope someone can help me. I'm starter with these kind of things, so there might be some really big mistakes in code.
<html>
<head>
<title>Laskurit</title>
</head>
<body>
<script language="JavaScript">
<!--
function Laskin() {
var paino = document.korvaus.paino.value;
var hinta = document.korvaus.hinta.value;
var mista = document.korvaus.mista.value;
var tulos;
if (mista == "koti")
{
paino *= 20 == koti1;
if (koti1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = koti1;
}
}
else if (mista == "ulko")
{
paino *= 9,75 == ulko1;
if (ulko1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = ulko1;
}
}
document.korvaus.tulos.value = tulos;
}
-->
</script>
<p><b>Korvauslaskuri</b></p>
<form name="korvaus">
<table><tr><td>Paino: <td><input type="text" name="paino"><br>
<tr><td>Kokonaishinta(€): <td><input type="text" name"hinta"><br>
<tr><td>Mistä/mihin?<br>
<td><select name="mista">
<option value="koti">Kotimaa</option>
<option value="ulko">Ulkomaa</option>
</select>
<tr><td>
<p>Korvausmäärä(€):</p>
<td><p><input type="text" size="40" name="tulos"></p>
</table></form>
<form name="nappulalomake">
<p><input type="button" name="B1" value="Laske" onClick="Laskin()"></p>
</form>
</body>
</html>
Not exactly sure what you are trying to accomplish but there were a few syntax errors in your code. Here working code
<html>
<head>
<title>Laskurit</title>
<script language="JavaScript">
<!--
function Laskin() {
var paino = document.korvaus.paino.value;
var hinta = document.korvaus.hinta.value;
var mista = document.korvaus.mista.value;
var tulos;
if (mista == "koti")
{
var koti1 = paino *20;
if (koti1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = koti1;
}
}
else if (mista == "ulko")
{
var ulko1 = paino *9.75;
if (ulko1 >= hinta)
{
tulos = hinta;
}
else
{
tulos = ulko1;
}
}
document.korvaus.tulos.value = tulos;
}
-->
</script>
</head>
<body>
<p><b>Korvauslaskuri</b></p>
<form name="korvaus">
<table border=0>
<tr><td>Paino: </TD><td><input type="text" name="paino"></td></tr>
<tr><td>Kokonaishinta(€):</tD><td><input type="text" name="hinta"></td></tr>
<tr><td>Mistä/mihin?</td><td><select name="mista">
<option value="koti">Kotimaa</option>
<option value="ulko">Ulkomaa</option>
</select>
</td></tr>
<tr><td>
<p>Korvausmäärä(€):</p></td>
<td><p><input type="text" size="40" name="tulos"></p></td>
</tr>
</table></form>
<form name="nappulalomake">
<p><input type="button" name="B1" value="Laske" onClick="Laskin()"></p>
</form>
</body>
</html>
I am having trouble displaying the results on my form under the questions. I thought I had it right. Also I need to create an Array that will hold the answers, which it will randomly pick one, doesnt have to go by the answers. I can't figure out how to display the results on the same page (I have looked and had no luck) Could anyone help me
<!doctype html>
<html>
<?php
include "menu.html"
?>
<head>
<meta charset="UTF-8">
<title>Form</title>
<link href="styles.css" rel="stylesheet">
<script>
function checkForm(){
var chk = true;
var Name = document.getElementById("txt");
var methd= document.getElementById("method");
var rad1= document.getElementById("radM");
var sel= document.getElementById("selM");
var necro = document.getElementById("a");
var guard = document.getElementById("b");
var ele = document.getElementById("c");
var shatter = document.getElementById("imp");
var cor = 0;
Name.style.backgroundColor="#fff";
methd.setAttribute("style", "display:none");
rad1.setAttribute("style", "display:none");
sel.setAttribute("style", "display:none");
if (Name.value==''){
Name.style.backgroundColor = "red";
methd.setAttribute("style", "display:inline");
chk = false;
}
if ((necro.checked==false) && (guard.checked==false) && (ele.checked==false)){
rad1.setAttribute("style", "display:inline");
}
if (shatter.value==0){
selM.setAttribute("style", "display:inline");
}
if (chk==false){
document.getElementById("error").setAttribute("style", "display:inline");
} else {
if (Name.value=="no"){
document.getElementById(txt).innerHTML += 'No';}
if (Name.value=="yes"){
document.getElementById(txt).innerHTML += 'Yes';}
if (ele.checked == true){
document.getElementById(c).innerHTML += 'Elementalist';}
if (necro.checked == true){
document.getElementById(a) += 'Necromancer';}
if (guard.checked == true){
document.getElementById(b) +='Guardian';}
if (shatter.value==1){
document.getElementById(imp) += 'Shatter';
}
if (shatter.value==2){
document.getElementById(imp) += 'Sunless';
}
if (shatter.value==3){
document.getElementById(imp) += 'Claw';
}
style.display = "inline";
innerHTML = "<span>You chose " + imp + txt + " correct!</span>";
}
}
</script>
</head>
<body>
<div class="page">
<article>
<div id="error" class="error"></div>
<h1>What Guild Wars 2 Profession Are You</h1>
<div class="cssTable" style="margin-top:-25px;">
<form method="post" action="thankyou.php" >
<table>
<tr><td colspan="3"></td></tr>
<tr>
<td><div align="right">In Guild Wars 2 Do You Like To Do Damage? </div> </td><td width="217"><input id="txt" name="txt" type="text" size="25"> <br/></td><td><div id="method" style="display:none"><img height="25px" src="purple.png" ></div></td><br/></tr>
<tr>
<td><div align="right">What Best Describes You?</div></td><td>
<input id="a" type="radio" name = "group1" value="A">Healer</input><br/>
<input id="b" type="radio" name = "group1" value="B">One With The Elements</input><br/>
<input id="c" type="radio" name = "group1" value="C">Darkness</input>
</td><td><div id="radM" style="display:none"><img height="25px" src="purple.png"></div></td>
</tr>
<tr>
<td>What One Skill Would You Like To Have?</td>
<td>
<select id="imp"><option value="0" selected="true">Pick A Skill</option>
<option value="1">Stealth</option>
<option value="2">Summon Illusions</option>
<option value="3">Great With A Bow and Arrow</option></select>
</td><td><div id="selM" style="display:none"><img height="25px" src="purple.png"></div></td>
</tr>
<tr><td colspan="3" align="right"><input type="button" class="styled-button-7" value="Send" onclick="checkForm()" /><span id="grde" style="padding-left:25px"> </span></td></tr></table></form></div></article>
</main></div>
</body>
</html>
I moved your call to checkForm() from an onclick on a button to the onsubmit of the form, and started returning chk from checkForm(). You should go through your checkForm() function and start making it work field by field. There are properties that you're trying to access incorrectly.
You can see it at:
http://jsbin.com/homeq/1/
I have worked out how to get the alert box up but it seems to skip my other validation which is checking the other feilds, ect, any ideas as too why it is skiiping it? it would really help!
I am fairly new to Javascript and HTML so could you explain it, thank you
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
window.validateForm=function() {
var result = true;
var msg = "";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color = "red";
//result = false;
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
//result = false;
}
if (document.ExamEntry.Exam_Number.value == "") {
msg += "You must enter the exam Number \n";
document.ExamEntry.subject.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
if (document.ExamEntry.Exam_Number.value.length != 4) {
msg += "You must enter at least Four Numbers in the Exam Number \n";
document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
var Number = document.ExamEntry.Exam_Number.value
if (isNaN(document.ExamEntry.Exam_Number.value)) {
msg += "You must enter at least four numeric characters in the Exam Number feild \n";
document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
var checked = null;
var inputs = document.getElementsByName('Exam_Type');
for (var i = 0; i < inputs.length; i++) {
if (!checked) {
checked = inputs[i];
}
}
if (checked == null) {
msg += "Anything for now /n";
} else {
return confirm('You have chosen ' + checked.value + ' is this correct?');
}
if (msg == "") {
return result;
} {
alert(msg)
return false;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="Exam_Number">Exam Number</td>
<td><input type="text" name="Exam_Number"<font size="1">(Maximum characters: 4)</font> </td>
</tr>
<tr>
<table><form action="">
<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br />
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
and here is a jsfiddle
Change:
var inputs = document.getElementsByName('Exam_Type');
to
var inputs = document.getElementsByName('examtype');
It seems you picked the wrong name for the radio elements.
Your for loop was checking the radio buttons incorrectly.
Code:
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
}
}
Please find the working fiddle here http://jsfiddle.net/sDLV4/2/
I changed code here please check...
Please find the working fiddle here
http ://jsfiddle.net/sDLV4/3/
Using HTML5 constraint validation, much of your code can be dropped, see my revision below. In addition to the wrong radio button group name pointed out by Juergen Riemer, your code has the following issues:
Better use the HTML5 DOCTYPE declaration, see below
Instead of <script language="javascript" type="text/javascript"> just use <script>. The script element does not have a language attribute, and the type attribute has the value "text/javascript" by default.
Do not define your validation function on the window object, but rather as global function (as below), or preferably as a member of a namespace object.
Instead of setting the form's name attribute to "ExamEntry", rather set its id attribute and reference the form of a variable like var examForm = document.forms["ExamEntry"];
Your HTML code is not well-formed, because in your form's table, on line 79, you start another table element with another form element, both of which do not have an end tag.
Also, it's preferable to us CSS for the form layout, instead of a table.
In my revision below I'm using a Pure CSS stylesheet for styling forms, and corresponding class values in certain elements.
For more about constraint validation in general and the HTML5 constraint validation features, see this tutorial.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8" />
<title>Exam entry</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.3.0/base-min.css&pure/0.3.0/forms-min.css" />
<script>
function validateForm() {
var result = true;
var msg = "";
var checked = null;
var examForm = document.forms['ExamEntry'];
var inputs = examForm.examtype;
for (var i = 0; i < inputs.length; i++) {
if (!checked) {
checked = inputs[i];
}
}
if (!checked) {
msg += "Anything for now /n";
} else {
return confirm('You have chosen ' + checked.value + ' is this correct?');
}
if (msg == "") {
return result;
} else {
alert(msg)
return false;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form id="ExamEntry" class="pure-form pure-form-aligned" method="post" action="success.html">
<div class="pure-control-group">
<label for="exNo">Exam Number:</label>
<input id="exNo" name="Exam_Number" required="required" pattern="\d{4}" title="You must enter a 4-digit exam number" />
</div>
<div class="pure-control-group">
<label>Exam type:</label>
<label class="pure-radio"><input type="radio" name="examtype" value="GCSE" /> GCSE</label>
<label class="pure-radio"><input type="radio" name="examtype" value="A2" /> A2</label>
<label class="pure-radio"><input type="radio" name="examtype" value="AS" /> AS</label>
</div>
<div class="pure-controls">
<button type="submit" class="pure-button pure-button-primary" onclick="return validateForm();">Submit</button>
<button type="reset" class="pure-button">Reset</button>
</div>
</form>
</body>
</html>