I really don't know why this validation doesn't work.
this is my html:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src="scripts.js"></script>
<title>Test Page!</title>
</head>
<body>
<form onsubmit ="return validateFormOnSubmit(this)" name="myForm" action = "testForm.html">
<input name="textField" type="text" value="" size="50" id= "textfield" /> <br />
<input name="button" type="submit" value="Submit"/>
</form>
</body>
</html>
and this is my javascript file:
function isURL(fld){
var error = "";
var regex = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/
if(regex.test(fld.value)){
error = "No URL's Allowed!";
}
else{
error = "";
}
return error;
}
function validateFormOnSubmit(myForm) {
var reason = "";
reason += isURL(myForm.textField);
if (reason != "") {
alert("there's something wrong: \n" + reason);
return false;
}
return true;
}
Thanks for your help.
update: is the action really required? testpage.html is just an empty html file here!
update 2: The problem is I don't see any message or alert.
It works fine, your scripts.js file isn't loaded properly or an old version is cached in your browser
Looks like you're passing in the form, rather than the field that you're trying to validate.
Related
I know there are 2-3 similar questions are on site but the mine is very specific.
So the situation is, I created a input field that validates a string if it matches /abc/ pattern (regex in javascript). But the output is very unexpected i.e., Even If i provide a input that matches the pattern then output is "Invalid input" and if i provide a input that doesn't matches the pattern then same above output. This is okay but I am unable to figure out what is what is happening when I am providing a valid input?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>form validation</title>
</head>
<body>
<script>
function check() {
var field = document.getElementById("1").data;
var regex = /abc/;
if(regex.test(field) === true)
document.getElementById("2").innerHTML="Input accepted";
else
document.getElementById("2").innerHTML="Invalid input!";
}
</script>
First field:<br />
<input type="text" id="1"> <span id="2"></span> <br />
<button type="submit" onclick="check();">Validate</button>
</body>
</html>
document.getElementById("1").data
Is not a valid method. You have to use value method to obtain the data inside the input box. Try this code:
<!DOCTYPE html>
<html>
<head>
<title>form validation</title>
</head>
<body>
<script>
function check() {
var field = document.getElementById("1").value;
var regex = /abc/;
if(regex.test(field) === true)
document.getElementById("2").innerHTML="Input accepted";
else
document.getElementById("2").innerHTML="Invalid input!";
}
</script>
First field:<br />
<input type="text" id="1"> <span id="2"></span> <br />
<button type="submit" onclick="check();">Validate</button>
</body>
</html>
PS: Please do use a bit of debugging tools that the browsers provide.
try using .value instead of .data
<script>
function check() {
var field = document.getElementById("1").value; //<--- here
var regex = /abc/;
if(regex.test(field) === true)
document.getElementById("2").innerHTML="Input accepted";
else
document.getElementById("2").innerHTML="Invalid input!";
}
</script>
Now if you write "abc" its will works.
I'm trying to get a search box that when it takes an input it sends the user to a specific page. But for some reason that, I cannot figure out, it doesn't do anything when an input is given. My code is the following:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
var input = document.getElementById("search");
function sendToPage(){
if (input.value == "happy"){
location.href="suggestion_happy.html";
}
else if (input.value == "sad"){
location.href="suggestion_sad.html";
}
else {
alert('Invalid Input.');
}
}
</script>
</head>
<body>
<div>
<form onsubmit="sendToPage()">
<input type="text" method="put" id="search" placeholder="Search" value="">
</form>
</div>
</body>
</html>
Please help I'm still kind of new to javascript :)
you don't need to create a form to do this
check out this code
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
function sendToPage(){
var input = document.getElementById("search").value;
//alert(input);
if (input == "happy"){
location.href = "suggestion_happy.html";
return false;
}
else if (input == "sad"){
location.href = "suggestion_sad.html";
return false;
}
else {
alert('Invalid Input.');
}
}
</script>
</head>
<body>
<div>
<input type="text" method="put" id="search" placeholder="Search" value="">
<input type='submit' onclick="sendToPage();" />
</div>
</body>
</html>
<script type="text/javascript">
function sendToPage(){
var input = document.getElementById("search").value;
//alert(input);
if (input == "happy"){
//location.href="suggestion_happy.html";
location.replace("suggestion_happy.html");
return false;
}
else if (input == "sad"){
location.replace("suggestion_sad.html");
return false;
}
else {
alert('Invalid Input.');
}
}
</script>
<div>
<form action="" onsubmit="return sendToPage()" method="post">
<input type="text" id="search" placeholder="Search" value="">
</form>
</div>
I have edited my asnwer plz try this
there are two problems here:
submitting a form will always refresh the page. So onsubmit is
killing your app
by putting the js in the <head> your
document.getElementById call fails because that element doesn't
exist yet. Javascript belongs at the end of the page, just before
the closing </body> tag
This is works fine when the form does not have any value. But, Once i entered the value on the textbox, it still alert the same messages i.e it is omitting 'You must enter value' for both cases,see at the if else statement. what is the mistake on the below code?
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item = document.getElementById("textbox1").value.length;
var item1 = document.forms[0].textname;
function formValid() {
if (item == 0) {
alert("You must enter value");
}
else {
alert(item1);
}
}
var formEl = document.getElementById("submitbutton1");
formEl.addEventListener("click", formValid());
</script>
</form>
</body>
</html>
You are fetching the length of the value when the page loads instead of when the the function runs.
Move
var item = document.getElementById("textbox1").value.length
inside the function.
Use this syntax in addEventListener formEl.addEventListener("click", formValid,false);
Also replace var item inside the function formValid().
Here is the fiddle
try this
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
</head>
<body>
<p>A Basic Form Example</p>
<form action="#">
<p>Name <em>(Required)</em>: <input id="textbox1" name="textname" type="text" /></p>
<p><input id="submitbutton1" type="submit" /></p>
<script type="text/javascript">
var item1 = document.forms[0].textname;
var formEl = document.getElementById("submitbutton1");
function init() {
formEl.addEventListener("click", formValid());
}
function formValid() {
var item = document.getElementById("textbox1").value.length;
if (item == 0) {
alert("You must enter value");
}
else if {
alert(item1);
}
}
</script>
</form>
</body>
</html>
Is this code correct? I want the 'submit' to validate the field (to make sure a value has been entered) and if this is correct (there is a value) then fade and display.
Currently, the form fades even when no value is entered? I feel I'm missing something really simple here!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
<link rel='stylesheet' type='text/css' href='styles.css' />
<meta charset="utf-8"-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<div id="sidebarf">
<form id="sidebarform" name="myForm" onsubmit="return validateForm()" method="post">
<input type="text" id="sidebarusername" name="fname" placeholder="Name" required>
<input type="submit" id="sidebarformsubmit" value="Submit">
</form>
</div>
<script>
$("#sidebarformsubmit").click( function(){
$("#sidebarform").fadeOut("slow", function(){
$("#sidebarf").html("hello " + $("#sidebarusername").val() )
});
});
</script>
</body>
</html>
Judging by your comment on the other answer, you don't care if this actually gets submitted, so you could do the following:
HTML:
<div id="sidebarf">
<form id="sidebarform" name="myForm" method="post">
<input type="text" id="sidebarusername" name="fname" placeholder="Name" />
<input type="submit" id="sidebarformsubmit" value="Submit" />
</form>
JS:
$(document).ready(function() {
$('#sidebarform').on('submit', function() {
if ($('#sidebarusername').val() == '') {
alert('First name must be filled out');
return false;
}
$("#sidebarform").fadeOut("slow", function(){
$("#sidebarf").html("hello " + $("#sidebarusername").val() );
});
return false;
});
});
Working example:
http://jsfiddle.net/3z5x8/
Your validation is bound to the submit event. The click event will always be fullfilled.
Bind your handler to the submit event also
$("#sidebarformsubmit").submit( function(){.....
Unless you are submitting with ajax the form will cause a page refresh also which means your fade and show new html won't work
I am trying to validate an html form using javascript the code is bellow
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function validate(){
if(document.form1.thbox.checked)
{
alert("yes");
}
else
alert("no");
}
</script>
<form name="form1" method="get">
<input type="checkbox" name="thebox"/>
<input type="button" value="press me" onclick="validate()"/>
</form>
</body>
</html>
when ever I try to press on button nothing works
Can someone please tell me why is that?
Thank you
Change if(document.form1.thbox.checked) to if(document.form1.thebox.checked) You have missed e in thebox
http://jsfiddle.net/eJhzf/
Perhaps because checked is not a valid property of undefined:
HTML:
name="thebox"
Javascript:
form1.thbox.checked
Notice the missing e, so, it should be:
form1.thebox.checked
use this method
if ( document.form1.thebox.checked == false )
{
alert ( "Please select check box." );
}
else {
// your code or message
}
and use thebox instead of thbox