I have written the following code in html and the javascript file is also embedded below
<!DOCTYPE html>
<meta charset="utf-8">
<HTML>
<head>
<link rel="stylesheet" href="admin.css"/>
<script type="text/javascript" src="common.js"></script>
</head>
<BODY>
<div class="adminnav" id="adminnav">
<ul>
<li>Insert
<ul>
<li>Insert Course</li>
<li>Insert Student</li>
<li>Insert Teacher</li>
<li>Insert Subject</li>
</ul>
</li>
</ul>
</div>
<div class="addcourse" >
<form name="course" onSubmit='return validcourse()' method="POST">
Course Name:
<input type="text" name="coursename" id="cname" /><br>
Duration:<input type="text" name="cd"/>
<br>
Course Id:<input name="cid" type="text" /><br>
<input type="submit" value="submit" name="submit"><input type="reset" name="coursereset">
</form>
</div>
</BODY>
</HTML>
common.js
function validcourse()
{
var course_name=document.course.coursename;
var course_duration=document.course.cd;
var course_id=document.course.cid;
if(course_name_valid(course_name))
{
{
if(course_duration_valid(course_duration))
{
if(course_id_valid(cid))
{
}
}
}
}
}
function course_name_valid(course_name)
{
var letters=/^[A-Za-z]+$/;
if(course_name.value.match(letters))
{
return true;
}
else
{
alert("Course name must have alphabets only");
course_name.focus();
return false;
}
}
function course_duration_valid(course_duration)
{
var letters=/^[1-9]+$/;
if(cd.value.match(letters))
{
return true;
}
else
{
alert("Course Duration can have numbers only");
course_duration.focus();
retun false;
}
}
function course_id_valid(course_id)
{
var letters=/^[0-9a-zA-z]+$/;
if(course_id.value.match(letters))
{
return true;
}
else
{
alert('Course ID must have character and numeric values only');
course_id.focus();
return false;
}
}
My problem is that nothing is happening no error messages are given.
Error messages are given only for course name but not for course duration and course id?
Here is a link to jsfiddle http://jsfiddle.net/amolkarale/aTfq6/1/
You are not returning anything from validcourse. Add a return true; and return false; in there, to either let the submission continue or stop the submission from happening:
function validcourse()
{
var course_name=document.course.coursename;
var course_duration=document.course.cd;
var course_id=document.course.cid;
if(course_name_valid(course_name))
{
{
if(course_duration_valid(course_duration))
{
if(course_id_valid(cid))
{
return true;
}
}
}
}
return false;
}
Looks like you have a syntax error in your third functioncourse_duration_valid(course_duration)
retrun false;
should be:
return false;
Okay, so I got your stuff to work. Here are the changes needed:
First, object references need to be cleaner in your DOM
var course_name=document.getElementById("cname");
var course_duration=document.getElementById("cd");
var course_id=document.getElementById("cid");
As you can see, the elements need to have their individual ids.
Course Name:
<input type="text" name="coursename" id="cname" /><br>
Duration:
<input type="text" name="cd" id="cd"/><br>
Course Id:
<input name="cid" type="text" id="cid" /><br>
Finally, the retrun needed to be corrected, as already pointed out by #Steve
Related
How can I check that some form fields are empty before submitting it and display an alert.
This is necessary due to the fact that some fields are hidden by v-show
Example
<!DOCTYPE html>
<header>
<script src="https://unpkg.com/vue#next"></script>
</header>
<body>
<div id="app">
<input type="text" id="idTest">
<form action="" onsubmit="return false" #submit="foo()">
<input v-show="false" type="text" required placeholder="required">
<input type="text" required placeholder="required">
<button type="submit" onsubmit="alert('works')">send</button>
</form>
</div>
</body>
<script>
const app = {
mounted() {
document.getElementById("idTest").value = Math.random().toString(36).substring(7);
},
methods: {
foo() {
alert("works");
}
}
}
Vue.createApp(app).mount('#app');
</script>
You can bind v-model to inputs, and then check inside submit function, if they are empty or not. Use v-if as well. Also as someone else said, your code looks really messy.
<!DOCTYPE html>
<header>
<script src="https://unpkg.com/vue#next"></script>
</header>
<body>
<div id="app">
<input type="text" id="idTest">
<form action="" onsubmit="return false" #submit="foo()">
<input v-if="false" v-model="inputField" type="text" required placeholder="required">
<input type="text" required placeholder="required">
<button type="submit" onsubmit="alert('works')">send</button>
</form>
</div>
</body>
<script>
const app = {
mounted() {
document.getElementById("idTest").value = Math.random().toString(36).substring(7);
},
data() {
return {
inputField: ""
}
},
methods: {
foo() {
if(this.inputField.length < 1) {
alert("input is empty")
}
}
}
}
Vue.createApp(app).mount('#app');
</script>
You can use the v-model attribute on the input and check if its empty.
Try this:
function required(inputtx)
{
if (inputtx.value.length == 0)
{
alert("message");
return false;
}
return true;
}
I am very new to js and html, could someone help me understand as to why my page is getting redirected to the next page even if the validation fails and my "validate()" function returns only FALSE!
I have created a form that takes name, age, email, state etc as input and it should ideally validate them and then proceed towards the next page.
Here is the code :
<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript">
function validate(){
var name=document.getElementById('name_id').value;
var email=document.getElementById('email_id').value;
var age=document.getElementById('age_id').value;
var state=document.getElementById('state_id').value;
var address=document.getElementById('address_id').value;
//checking conditions for name
if (name_length<10)
{
return false;
}
if(!(/\w \w/.test(name2)))
{
alert("Please enter name correctly!");
return false;
}
if(/\d/.test(name2))
{
alert("Name cannot contain digits");
return false;
}
//checking conditions for email
var index_of_at = name.indexOf('#');
if(index_of_at == -1)
{
alert("Please enter a valid email address");
return false;
}
else
{
var befor_at = email.substring(0,index_of_at);
var after_at =email.substring(index_of_at+1,email.length);
if(!(/[!-$?]/.test(before_at)))
{
if((/(\w|\d|.)/).test(before_at))
continue;
else
{
alert("Please enter a valid email address");
return false;
}
}
else
{
alert("Please enter a valid email address");
return false;
}
}
//checking conditions for age
if(/\w/.test(age))
{
alert("Please enter a valid Age");
return false;
}
else
{
if(age>100 || age<0)
{
alert("Please enter age btetween 0 and 100");
return false;
}
}
return false;
}
</script>
</head>
<body>
<h1 style = "text-align : center;"> Enter Details </h1>
<form action = "C:\Users\hp\Documents\Orgzit Project\handle.html" method="post" onsubmit="return validate();">
Name:<br>
<input type="text" name="name" id="name_id"><br>
Email:<br>
<input type="text" name="email" id="email_id"><br>
Age:<br>
<input type="text" name="age" id="age_id"><br>
State:<br>
<input type="text" name="state" id="state_id"><br>
Address:<br>
<input type="text" name="address" id="address_id"><br>
Photo: <br>
<input type="img" name="display-picture" id=photo_id>
<br> <br> <br>
<input type="submit" value ="Submit">
</form>
</body>
</html>
Could somebody please help me with why my code redirects directly to handle.html without checking for validations?
You're trying to get the length of name as follow: name_length this is a typo, however, you have another error: a continue keyword
if((/(\w|\d|.)/).test(before_at))
continue;
^
else
Changed to:
if((/(\w|\d|.)/).test(before_at)) {
//continue; You need to modify this part.
} else {
alert("Please enter a valid email address");
return false;
}
You need to understand that continue keyword must be placed within a loop, i.e: for-loop.
<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript">
function validate(e){
var name=document.getElementById('name_id').value;
var email=document.getElementById('email_id').value;
var age=document.getElementById('age_id').value;
var state=document.getElementById('state_id').value;
var address=document.getElementById('address_id').value;
//checking conditions for name
if (name.length<10)
{
alert('Please enter name correctly!');
return false;
}
if(!(/\w \w/.test(name2)))
{
alert("Please enter name correctly!");
return false;
}
if(/\d/.test(name2))
{
alert("Name cannot contain digits");
return false;
}
//checking conditions for email
var index_of_at = name.indexOf('#');
if(index_of_at == -1)
{
alert("Please enter a valid email address");
return false;
}
else
{
var befor_at = email.substring(0,index_of_at);
var after_at =email.substring(index_of_at+1,email.length);
if(!(/[!-$?]/.test(before_at)))
{
if((/(\w|\d|.)/).test(before_at)) {
//continue;
} else
{
alert("Please enter a valid email address");
return false;
}
}
else
{
alert("Please enter a valid email address");
return false;
}
}
//checking conditions for age
if(/\w/.test(age))
{
alert("Please enter a valid Age");
return false;
}
else
{
if(age>100 || age<0)
{
alert("Please enter age btetween 0 and 100");
return false;
}
}
return false;
}
</script>
</head>
<body>
<h1 style = "text-align : center;"> Enter Details </h1>
<form action = "C:\Users\hp\Documents\Orgzit Project\handle.html" method="post" onsubmit="return validate(event);">
Name:<br>
<input type="text" name="name" id="name_id"><br>
Email:<br>
<input type="text" name="email" id="email_id"><br>
Age:<br>
<input type="text" name="age" id="age_id"><br>
State:<br>
<input type="text" name="state" id="state_id"><br>
Address:<br>
<input type="text" name="address" id="address_id"><br>
Photo: <br>
<input type="img" name="display-picture" id=photo_id>
<br> <br> <br>
<input type="submit" value ="Submit">
</form>
</body>
</html>
If you want to start learning web development with html and javascript, i suggest learn shortest way to do it. For javascript validation check this jquery validation
<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation#1.17.0/dist/jquery.validate.js"></script>
</head>
<body>
<h1 style = "text-align : center;"> Enter Details </h1>
<form action = "C:\Users\hp\Documents\Orgzit Project\handle.html" name="userForm" id="userForm" method="post">
Name:<br>
<input type="text" name="name" id="name_id"><br>
Email:<br>
<input type="text" name="email" id="email_id"><br>
Age:<br>
<input type="text" name="age" id="age_id"><br>
State:<br>
<input type="text" name="state" id="state_id"><br>
Address:<br>
<input type="text" name="address" id="address_id"><br>
Photo: <br>
<input type="img" name="display-picture" id=photo_id>
<br> <br> <br>
<input type="submit" value ="Submit">
</form>
<script type="text/javascript">
$('#userForm').validate({
rules: {
name :{
required : true
},
email: {
required : true,
email : true,
},
age: {
required: true,
minlength:18, // Can define minimum age
maxlength:60 // max page
}
},
submitHandler: function(form) {
alert("All Well") ;
$("#userForm").submit(); // form tag id to sumit the form
return false ;
}
});
</script>
</body>
</html>
With jquery validation you can lots too much work with very short hand code.
Hope this will help, All the best.
I'm a complete noob at this stuff.
But my goal here is to accept a certain username and validate it with a certain password.
I've searched and searched all night to no avail so here I am looking for an answer.
My code in html:
<form action="" method="POST" id="loginForm">
<label for="userName" accesskey="F"><br>Username:</label>
<input type="username" name="userName" id="userName">
<label for="password"><br>Password: </label>
<input type="password" name="password" id="password">
<button>Submit</button>
</form>
My code in a seperate javascript file (which is being called by the html file):
function validate(id) {
var guest1User = /guest1/;
var guest2User= /[guest1]/;
var guest1Pass= /[guest2]/;
var guest2Pass= /[guest1]/
var userCheck= document.getElemetnById(userName);
var passCheck= document.getElementById(password);
if (guest1User.test(userCheck.value)) {
if (guest1Pass.test(passCheck.value)) {
return true;
} else {
return false;
}
}
if (guest2User.test(guestCheck.value)) {
if (guest2Pass.test(passCheck.value)) {
return true;
} else {
return false;
}
} else {
return false;
}
}
validate();
Try the following approach:
As per your comment you were wondering how would the js file know that its function has been called.... therefore you need to include the js file in the html file in the following way:
<script type="text/javascript" src="somefile.js"></script>
make sure the path to the somefile.js is correct for example if your file system is like that:
/root/js/
/root/html/
<script type="text/javascript" src="../js/somefile.js"></script>
and your html file is inside the html folder then you refer to the js file as:
function validate(id) {
var guest1User = /guest1/g;
var guest2User= /[guest1]/g;
var guest1Pass= /[guest2]/g;
var guest2Pass= /[guest1]/g;
var userCheck= document.getElementById('userName');
var passCheck=document.getElementById('password');
if (guest1User.test(userCheck.value)) {
console.log("true");
if (guest1Pass.test(passCheck.value)) {
console.log("true");
return true;
} else {
console.log("false");
return false;
}
}
else
{
console.log("false");
return false;
}
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--
<script type="text/javascript" src="../js/somefile.js"></script>
-->
</head>
<body>
<form action="#" method="POST" id="loginForm">
<label for="userName" accesskey="F"><br>Username:</label>
<input type="username" name="userName" id="userName">
<label for="password"><br>Password: </label>
<input type="password" name="password" id="password">
<input type=submit onclick="return validate();" value="submit"/>
</form>
</body>
</html>
I would like to have a form where it asks for a user's name, phone number and email address. The name field should only contain letters, the phone number field should only contain numbers and the email field should contain '#'. The form needs to be validated using Javascript. The validation should happen when the user clicks on submit. Can someone help? Please look at my existing code:
HTML:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Contact</title>
<script src="datavalidation.js"></script>
</head>
<body onload="document.registration.userid.focus();">
<section>
<h1>Contact</h1></br>
<h2>To get in contact with us please fill out the contact form below</h2></br>
<p>Fill in all of the boxes below and click the 'Submit' button to submit message and one of our team will get back in touch with you within 48 hours</p></br>
<form name='registration' onSubmit="return formValidation();">
<ul>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="number">Phone No:</label></li>
<li><input type="text" name="number" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label for="desc">Message:</label></li>
<li><textarea name="desc" id="desc"></textarea></li>
<li><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form>
</section>
Javascript:
function formValidation()
{
var uname = document.registration.username;
var unumber = document.registration.number;
var uemail = document.registration.email;
{
if(allLetter(uname))
{
if(allnumeric(unumber))
{
if(ValidateEmail(uemail))
}
}
}
return false;
function allLetter(uname)
{
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert('Username must have alphabet characters only');
uname.focus();
return false;
}
}
function allnumeric(unumber)
{
var numbers = /^[0-9]+$/;
if(unumber.value.match(numbers))
{
return true;
}
else
{
alert('Phone number must have numeric characters only');
unumber.focus();
return false;
}
}
function ValidateEmail(uemail)
{
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
return false;
}
else
{
alert('Form Succesfully Submitted');
window.location.reload()
return true;
}
}
}
Please help!
function formValidation()
{
var uname = document.registration.username;
var unumber = document.registration.number;
var uemail = document.registration.email;
if(allLetter(uname))
{
if(allnumeric(unumber))
{
ValidateEmail(uemail)
}
}
function allLetter(uname)
{
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert('Username must have alphabet characters only');
uname.focus();
return false;
}
}
function allnumeric(unumber)
{
var numbers = /^[0-9]+$/;
if(unumber.value.match(numbers))
{
return true;
}
else
{
alert('Phone number must have numeric characters only');
unumber.focus();
return false;
}
}
function ValidateEmail(uemail)
{
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
alert('Form Succesfully Submitted');
window.location.reload();
return true;
}
else
{
alert("You have entered an invalid email address!");
return false;
}
}
}
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Contact</title>
<script src="datavalidation.js"></script>
</head>
<body>
<section>
<h1>Contact</h1></br>
<h2>To get in contact with us please fill out the contact form below</h2></br>
<p>Fill in all of the boxes below and click the 'Submit' button to submit message and one of our team will get back in touch with you within 48 hours</p></br>
<form name='registration' onSubmit="return formValidation();">
<ul>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="number">Phone No:</label></li>
<li><input type="text" name="number" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label for="desc">Message:</label></li>
<li><textarea name="desc" id="desc"></textarea></li>
<li><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form>
</section>
my html code is below
<script src="js/validate.js"></script>
<label>FIRST NAME:</label>
</td>
<td>
<input type="text" class="firstname" id="firstname" onKeyUp="firstname()" />
</td>
<td>
<label id="fn"></label>
and my js code is below
function firstname()
{
var nname=document.getElementById("firstname").value;
var l=nname.length > 3 ;
if( !l)
{
producePrompt("firstname should not be less than 4 characters","fn","red");
return false;
}
else
if(!nname.match(/^[a-zA-Z\s]*$/))
{
producePrompt("incorrect name","fn","red");
return false;
}
else
{
producePrompt("correct","fn","green");
return true;
}
}
function producePrompt(message,promptlocation,color)
{
document.getElementById(promptlocation).innerHTML= message;
document.getElementById(promptlocation).style.color= color;
}
but my code is not showing the messages or does not validate it properly
the js is under a file named validate.js and html is in index.html
i tried both types (,) to include the js file but no validation is taking place
try this , works fine for me (validation works) :
js :
function checkinput()
{
var nname=document.getElementById("firstname").value;
var l=nname.length > 3 ;
if(!l)
{
console.log("firstname should not be less than 4 characters","fn","red");
return false;
}
else
if(!nname.match(/^[a-zA-Z\s]*$/))
{
console.log("incorrect name","fn","red");
return false;
}
else
{
console.log("correct","fn","green");
return true;
}
}
html:
<form>
<label>FIRST NAME:</label> <input type="text" class="firstname" id="firstname" onblur="checkinput()" />
</form>
<body>
// all your html contents
// load the scripts here
<script src="js/validate.js"></script>
</body>
OR
<body>
// all your html contents
<script>
// javascript contents
</script>
</body>