I used "required" to validate my form but its not work at IE browser. Is this a common error? How to I solve it? Below is my code :
this is my html code which work prefect at Google Chrome and Firefox browser.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Import a CSV File with PHP & MySQL</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1" >
Subject : <br/>
<input type="text" name="subject" id="subject" required/> <br/>
Choose your file: <br />
<input name="csv" type="file"id="csv" accept=".csv" required/> <br/>
Content : <br/>
<textarea name="message" cols="50" rows="10" required></textarea><br/>
<input type="submit" name="submit" value="Submit" onclick="storeQueEmail()"/>
</form>
</body>
</html>
No. required attr wont work for less then IE10. So you could use plugins for validata the form
Here the plugin I would recommend for you..
http://ericleads.com/h5validate/
http://posabsolute.github.io/jQuery-Validation-Engine/
http://adodson.com/jquery.form.js/
Related
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="" placeholder="Not required">
<input type="text" name="" placeholder="Required" required>
<input type="submit" name="" value="Submit">
</body>
</html>
So I'm sorry for asking this but I'm learning HTML for Django and this code seems right to me but I don't get any messages/popup when the required field is empty and I click on submit button.
You need to put your inputs inside the form tag.
<form>
<input type="text" name="" placeholder="Not required" />
<input type="text" name="" placeholder="Required" required />
<input type="submit" name="" value="Submit" />
</form>
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Contact</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<link href="CSS/contact.css" rel="stylesheet" type="text/css" />
</head>
<body>
<main>
<div class="wrapper">
<form class="contact-form" action="mailto:zachareaislam#gmail.com" method="post">
<br><br>
<input type="text" name="first_Name" placeholder="First name" pattern="[a-z, A-Z]{0,15}" required><br>
<input type="text" name="last_Name" placeholder="Last Name" pattern="[a-z, A-Z]{0,15}" required><br>
<input type="email" name="email " placeholder="Your email address" required><br>
<input type="text" name="subject" placeholder="Subject"><br>
<textarea name="message" placeholder="Your message" required></textarea><br>
<input type="submit" name="submit">
</form>
</div>
</main>
</body>
</html>
/*Not sure as to why it doesn't work.
/*Only just noticed it didn't work while performing some maintenance
You cannot only use HTML, since sending data with a form requires a server backend (like with node or php) to post data.
You cannot send a form directly to email from the HTML. Form should be submitted to some processing file, like .php. You might have had some kind of framework that used to process these types of forms, but generally it should be following:
Action should be a path to the script file like mail.php
Mail.php receives info from the HTML in a $_REQUEST[] set of variables, each variable has a "name" and value.
It processes the request, then can send back to the page.
When I put some specific numbers in the HTML input text-box, I can't submit it with the last version of Internet Explorer or Edge. It says "Invalid Number". For exemple, "43.7" is considered as an invalid number.
<!DOCTYPE html>
<head>
<title>TITLE</title>
</head>
<body id="page">
<form method="post" id="myForm">
<p>
<label for="value"></label>
<input type="number" step="0.01" name="value" id="value" min="35" />
</p>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Edit : The problem is apparently related to the "min" value.
No problem appears if we put "30" as min value.
Thank you for your help.
Quentin
You can try this
<input type="number" step="0.1" name="value" id="value" min="35" />
or a regular expression to set the pattern attribute
<input type="number" pattern="^[1-9]\d*(\.\d+)?$" name="value" id="value" min="35" />
You can try this workaround:
$("input[type='button'").click(function(){
console.log("Submitted value " + $("input[type='number'").val());
$("input[type='number'").val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<head>
<title>TITLE</title>
</head>
<body id="page">
<form method="post" id="myForm">
<p>
<label for="value"></label>
<input type="number" step="0.01" name="value" id="value" min="35" />
</p>
<input type="button" value="Submit" />
</form>
</body>
</html>
I have a form like this,
<form>
Username: <input type="text" name="usrname" required>
<input type="button" value="Post">
</form>
I want a tooltip to pop-up if the user clicks on the button without entering anything in the textbox.
I know it will work if I change the button to like this - <input type="submit" value="Post">. But I don't want to do that.
Did you mean formaction instead of action?
<input type="text" name="usrname" required formaction="action_page.php">
action is a form tag attribute, not inputs's.
Use HTML5
Try like this it will work :
action attribute specifically for form tag. not input tag
<form action="action_page.php">
Username: <input type="text" name="usrname" required >
<input type="submit" value="Post">
</form>
Use method "POST" in tag, It will work
<form action="action_page.php" method="POST">
Username: <input type="text" name="usrname" required >
<input type="submit" value="Post">
</form>
I figured out how to do this with some jQuery based on an answer from this post.
The following code does exactly what I was looking for,
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form id="myForm">
Username: <input type="text" name="usrname" required id="input">
<input type="button" value="Post" id="button">
</form>
<script>
$('#button').click(function(e) {
if ($('#input').val() === "") {
$('<input type="submit">').hide().appendTo('#myForm').click().remove();
}
});
</script>
</body>
</html>
See here for DEMO
I have a form and when the form is loaded through a browser, I want it to submit the data automatically.
The problem is I wrote a PHP script that will submit it all fine on a test form. My problem is the server I'm trying to submit the data to named the button "submit".
Here is the example form:
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.forms[0].action="submit"
</script>
</body>
</html>
The person that created the form on the other server named it "submit". Is there a workaround until they fix it?
Here is a example of the person's form
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="submit" class="submit" value="Send Data" />
</form>
</body>
</html>
You want to submit the form? Then simply use its submit() method:
document.forms[0].submit();
If the server expects submit to be POSTed, i.e. the button being clicked, you can simply trigger the click() event of the button. Since you cannot access it using its name, I'd use jQuery for it:
$('input[name="submit"]').click();
Instead of:
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.forms[0].action="submit"
</script>
</body>
</html>
Try this:
<html>
<head>
</head>
<form name="MyForm" action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
</form>
<script type="text/javascript">
document.MyForm.submit();
</script>
</body>
</html>
If I understand your question correctly, the input element has name="submit" and type="submit". They are different things.
So you can also create the same behavior easily.