I'm a student developer and I'd like to make a message appear when I click on the submit button but there's still a select required
<style>
.messagerequire {
color: red;
display: none;
}
</style>
<p class="messagerequire">Test, If there is a require to submit I appear ! </p>
Here it has the style display:none and I thought I would do that if the form doesn't validate because of a requirement, it changes the CSS.
I've been searching since this morning for answers, but I haven't found or understood.
<input type="submit" name="register" value="register">
Thanks you
Simply check if the select input is invalid in your submit handler, then change the display property for that p element (in this case the first element that has the class). Not the most elegant solution but the simplest in your case:
var submitBtn = document.getElementById('submit');
submitBtn.addEventListener('click', function() {
document.getElementsByClassName('messagerequire')[0].style.display = 'block';
})
<style>
.messagerequire {
color: red;
display: none;
}
</style>
<p class="messagerequire">Test, If there is a require to submit I appear !</p>
<input type="submit" id="submit">
A better approach in my view would be to have two classes for showing and hiding the error and dynamically toggling the p elements' class instead of modifying it's styles.
you code should be something like below. becuase you are using input type=submit so before submit it should validate.
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
document.getElementById('error').style.display='block';
return false;
}
}
<style>
.messagerequire {
color: red;
display: none;
}
</style>
<form name="myForm" action="/page.php" onsubmit="return validateForm()" method="post">
<p class="messagerequire" id='error'>Test, If there is a require to submit I appear ! </p>
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
You need to use JavaScript to achieve this.
function submitThis(){
let name = document.getElementById("name").value;
if(name.length === 0){
document.getElementsByClassName("error")[0].innerText = "Cannot leve name empty.";
//Removing(hinding) the error after 5 seconds.
setTimeout(()=>{
document.getElementsByClassName("error")[0].innerText = "";
}, 5000);
}
}
.error {
color: red;
}
<input type="text" palceholder="Name" id="name" required />
<br>
<br>
<p class="error"></p>
<br>
<br>
<button onclick="submitThis()">SUBMIT</button>
Please you try it.
$('#submit').click(function(){
$('.messagerequire').css('display','block');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.messagerequire {
color: red;
display: none;
}
</style>
<body>
<p class="messagerequire">Test, If there is a require to submit I appear !</p>
<input type="submit" id="submit">
</body>
Related
I would like to enter a text in an input field and have it displayed in a text box.
I think it's easy. I need one Input for enter a text, a button and a textbox to show my text. But my code doesn't work.
This is my code:
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
function ausgabe(){
var text=document.getElementById("text");
var Wiedergabe=document.getElementById("Wiedergabe");
var Text=text.value;
Wiedergabe.value=Text
}
</script>
<div class="Webview">
<div class="message_container" id="myForm" ></div>
<form class="send_container">
<input type="text">
<button type="submit"
value="Nachricht absenden"
onclick="ausgabe">
</form>
</div>
#charset "UTF-8";
.Webview{
height: 400px;
width: 300px;
}
.message_container{
height: 80%;
width: 100%;
border:5px solid green;
}
.send_container{
height: 20;
width: 100%;
}
.send_container input{
width: 70%;
height:20%
border:2px solid #1CE615;
}
.send_container button{
width: 30%;
height:20%;
}
I think you somehow did some misconceptions about id and naming, you are trying to access elements with wrong names - a solution can be the following:
<input id="textField" type="text">
<p>
<input type="button" id="theButton" value="click me!"
onclick="document.getElementById('div').innerHTML =
document.getElementById('textField').value" />
</p>
<h3><div id="div"></div></h3>
I found few issues in your code, let me summarize that here:
For input element for user provided text you had the <input type="text"> which should have an id attribute as well in order to catch by getElementById.
In order to find an aim element, you need to also provide a proper id or class. I guess with the message_container you can achieve that by using document.getElementsByClassName('message_container')[0]. Then you can set the value of that element with innerHTML property.
So based on my explanation I think this solution can work for you:
const ausgabe = () => {
const textInput = document.getElementById("text");
const messageContainer = document.getElementsByClassName('message_container')[0];
messageContainer.innerHTML = textInput.value;
}
<div class="Webview">
<div class="message_container" id="myForm"></div>
<form class="send_container">
<input id="text" type="text" />
<button type="button" onclick="ausgabe()">Nachricht absenden</button>
</form>
</div>
I hope this helps!
I have a tag input it is working but, without entering the value if I click on submit button, it should display an error message like required field
$('#form-tags-4').tagsInput({
'autocomplete': {
source: [
'apple',
'banana',
'orange',
'pizza'
]
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://raw.githubusercontent.com/underovsky/jquery-tagsinput-revisited/master/dist/jquery.tagsinput-revisited.min.css" rel="stylesheet"/>
<script src="https://raw.githubusercontent.com/underovsky/jquery-tagsinput-revisited/master/dist/jquery.tagsinput-revisited.min.js"></script>
<label>Tags input with autocomplete:</label>
<input id="form-tags-4" name="tags-4" type="text" value="">
<button type="submit" id="save" class="btn btn-default ">SAVE</button>
Here is the reference link
Yes, you have this error because Chrome (or other browser) can't focus the element. The original text input is hidden by the plugin.
So you get the error :
An invalid form control with name='tags' is not focusable.
The plugin uses display: none; on the original field, which is a mistake I think. You can apply this CSS to have the correct validation message :
.form-tags-required {
position: absolute;
left: 0;
opacity: 0;
display: block !important;
top: 10px; // depends on your form, adapt it
}
This way, the original input can be focused and receive the "required error".
You need to write custom javascript for validation.
function validateForm()
{
var a = document.getElementById("form-tags-4").value;
if (a == "" )
{
alert("Please Fill The Required Field");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Tags input with autocomplete:</label>
<input id="form-tags-4" name="tags-4" type="text" value="">
<button type="submit" id="save" class="btn btn-default " onclick="return validateForm()">SAVE</button>
Add form tags and add "required" on input.
<form>
<label>Tags input with autocomplete:</label>
<input id="form-tags-4" name="tags-4" type="text" value="" required>
<button type="submit" id="save" class="btn btn-default ">SAVE</button>
</form>
working fiddle
You have to add required='required' on your input first.
After that you must check during onClick event the value set and decide if it is right or wrong according to autocomplete source values.
See sample here
<html>
<head>
<title> Form Validation </title>
<style type="text/css">
fieldset { width: 280px; padding: 6px; }
label { float: left; width: 100px; font: 12px Arial; padding: 5px; }
input { margin-bottom: 5px; }
</style>
</head>
<body>
<form id="inputForm" onsubmit="return validateForm();" action="#">
<fieldset>
<label>First Name:</label><input type="text" name="first_name" /><br />
<label>Surname:</label><input type="text" name="surname" /><br />
<label>Postcode:</label><input type="text" name="postcode" /><br />
<label>Email:</label><input type="text" name="email" /><br />
<input type="submit" name="submit" value="Send form" />
<input type="reset" name="reset" value="Reset" />
</fieldset>
</form>
<script type="text/javascript">
function validateForm() {
var form = document.forms['inputForm'];
var formats = {
First_name: /^[a-z]+[\-`\s]?[a-z]+$/i,
Surname: /^[a-z]+[\-`\S]?[a-z]+$/i,
Postcode: /^\d{4}$/,
Email:/^w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,4})+$/
};
var elCount = form.elements.length;
for(var i = 0; i <elCount; i++) {
var field = form.elements[i];
if(field.type == 'text') {
if(!formats[field.name].test(field.value)) {
alert('Invalid '+field.name.replace('_', ' '));
field.focus();
return false;
}
}
}
}
</script>
</body>
</html>
Hey guys trying to figure out why the code is giving me a error:underfinded formats[fields.Name] but its has been defined. Its just a simple form so I am not sure what I am doing wrong. Sorry for the basic question but I have been looking over it multiple time and can't see it. Cheers again.
Assuming the error you are talking about is on this line:
if(!formats[field.Name].test(field.value)) {
I'd suggest using a lowercase "n" in the "name" property:
if(!formats[field.name].test(field.value)) {
JavaScript is case sensitive.
UPDATE: In addition to what I've already mentioned, but still regarding case sensitivity, your formats object has property names with mixed case, e.g., First_name, but the corresponding input elements have a name attribute in lowercase, e.g., name="first_name", so when you retrieve an element's name and try to use it to look up the property in formats it will return undefined. You need to make those match case.
Fix those errors and it works: http://jsfiddle.net/M4Nzr/
I'm trying to make it so that my site has a textbox and a submit button on a form. When a user enters the URL of a video in the textbox and clicks submit, JavaScript should replace a certain block of text with that URL.
Here's my code. I'm new to JavaScript and thanks for the help in advance!:
<!doctype html>
<html>
<head>
<meta type="utf-8">
<title> Vid_hack </title>
</head>
<style type="text/css">
a:link { color: #CC0000 ; text-decoration: bold}
a:active { color: #CC0000 ; text-decoration: none}
a:visited { color: #CC0000; text-decoration: none}
a:hover { color: #FFFFFF; text-decoration: bold; background: #336699}
body {
background-color: #222222;
}
</style>
<body>
<div align="center">
<p center="" style="background: #444444; border-radius: 15px; border: solid 3.0pt white; padding: 10px">
<object><param name="allowfullscreen" value="true"></param><p id="url"><embed src="INSERT-VIDEO-URL-HERE" type="application/x-shockwave-flash" allowfullscreen="1" width="800" height="600"></embed></p></object>
<BR>
<BR>
<form method="post">
<input type="text" name="vid" value="Insert URL here" maxlength="200" />
<br>
<button onclick="return vid()">Play</button>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js"></script>
<script>
function vid()
{
var txt = $("#vid").attr("value");
$("#url embed").attr("src",txt);
return false;
}
</script>
<BR>
<BR>
<BR>
<span style="color: #FFF" align="center">
<BR>
<BR>
Please view the included README file for more information.
</span>
</p>
</div>
<BR>
<BR>
<BR>
</body>
</html>
I think you want do that:
<script>
var flash_wrapper =
'<object><param name="allowfullscreen" value="true"></param><p id="url"><embed src="INSERT-VIDEO-URL-HERE" type="application/x-shockwave-flash" allowfullscreen="1" width="800" height="600"></embed></p></object>'
document.write(flash_wrapper)
</script>
</script>
<BR>
<BR>
<form method="post" name="myForm" onsubmit="return valid()">
<input type="text" name="first_name" value="Insert URL here" maxlength="100" />
<br>
<button>Play</button>
</form>
<script>
function valid(){
var url = document.myForm.first_name.value;
var str = document.getElementById("url").innerHTML;
var n = str.replace("INSERT-VIDEO-URL-HERE", url);
document.getElementById("url").innerHTML = n;
return false;
}
</script>
Prefer place onsubmit on the form, because if the user press enter and so don't click on the button, he bypasses the validation. And i complete your code for replace url in html et add return false at the end of the function for prevent submit of form else it reload page.
Note that in its current form you will only get to change the video URL once since on the second button click the innerHTML will no longer contain INSERT-VIDEO-URL-HERE but instead contain the URL from the first button click. That may or may not be desired.
Assuming that's not an unexpected behavior then you just need to change the innerHTML with n after you've replaced it with the url from the form field. See below
function vid()
{
var str=document.getElementById("url").innerHTML;
var n=str.replace("INSERT-VIDEO-URL-HERE", document.forms[0].elements[0].value);
document.getElementById("url").innerHTML = n;
}
Note that this is just a quick solve that makes a couple assumptions without knowing the surrounding HTML. There are a few things that could improve the code overall:
Avoid document.write. At the minimum, add the flash to a wrapper and do something like document.getElementsById('#flash_wrapper').innerHTML = flash_wrapper;
Avoid inline javascript events (like using the onclick attribute). http://www.quirksmode.org/js/events_advanced.html
If you plan on writing more javascript in the future that interacts with the page contents, I'd suggest learning jQuery at http://jquery.com as it takes a lot of headaches out of the picture and is pretty straightforward to learn.
this relies on jquery
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.js"></script>
<script>
var flash_wrapper =
'<object><param name="allowfullscreen" value="true"></param><p id="url"><embed src="INSERT-VIDEO-URL-HERE" type="application/x-shockwave-flash" allowfullscreen="1" width="800" height="600"></embed></p></object>'
document.write(flash_wrapper)
</script>
<BR>
<BR>
<form method="post">
<input type="text" id="first_name" value="Insert URL here" maxlength="100" />
<br>
<button onclick="return vid()">Play</button>
</form>
<script>
function vid()
{
var txt = $("#first_name").attr("value");
$("#url embed").attr("src",txt);
return false;
}
</script>
try it out
http://jsfiddle.net/axrwkr/jDhNc/
I have the problem that I can't set two different text colors (via css classes) in the following javascript form. The standard class is grey (grey text color), but once someone clicks on "Type your mail here" the email color text to type in, should be black. (class black). Someone can help me?
<form name="mainform" method="post">
Your email: <input type="text" size="40" class="grey" name="email" value="{{ fields.email.input }}" onclick="ClearIfAppropriate();">{{ fields.email.error }} <input type="submit" name="submit" value="Go">
</form>
<script type="text/javascript" language="JavaScript"><!--
var LabelText = "Type your email here";
if(document.mainform.email.value.length == 0) {
document.mainform.email.value = LabelText;
}
function ClearIfAppropriate() {
if(document.mainform.email.value == LabelText) {
document.mainform.email.value = "";
document.mainform.email.class = "black";
}
}
//--></script>
CSS Classes
.grey {
color: grey;
}
.black {
color: black;
}
This is easily doable in pure CSS No javascript is necessary:
input.grey:focus
{
color: #000;
}
Although I think ie<8 doesn't support the pseudo-class :focus.
The attribute you want to change is
className
See here http://www.jsfiddle.net/dduncan/hdtvr/
Give an id to your input (id="idElement") and
instead of: document.mainform.email.class = "black";
try:
document.getElementById("idElement").setAttribute("class", "className");
Should do it.