I have been trying to test the required attribute using Jquery.
I am enabling it for all the inputs with "class=keyclass"
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(".keyclass").attr('required',true)
</script>
<body>
<form id="form1" >
<div id='key'>
<label for="firstname"><strong>First Name </strong></label>
<input class="keyclass" id='firstname' type="text" placeholder="Enter name " name="keyvault">
<label for="name"><strong>Last Name</strong></label>
<input class="keyclass" id='lastname' type="text" placeholder="Enter name" name="name" >
<input type="hidden" placeholder="Hidden Field" name="value">
<label for="requestoremail"><strong>Requestor's Email Address</strong></label>
<input class="keyclass" id='requestoremail' type="text" placeholder="Enter your email address" name="requestoremail" >
<label for="purpose"><strong>Purpose</strong></label>
<input class="keyclass" id='purpose'type="text" placeholder="Enter purpose " name="purpose" >
</div>
<button form="form1">Submit</button>
</form>
</body>
</html>
The strange thing is that it works in jsfiddle but not my own browser. Is there anything wrong in the code?
hello script tag move to bottom
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form id="form1" >
<div id='key'>
<label for="firstname"><strong>First Name </strong></label>
<input class="keyclass" id='firstname' type="text" placeholder="Enter name " name="keyvault">
<label for="name"><strong>Last Name</strong></label>
<input class="keyclass" id='lastname' type="text" placeholder="Enter name" name="name" >
<input type="hidden" placeholder="Hidden Field" name="value">
<label for="requestoremail"><strong>Requestor's Email Address</strong></label>
<input class="keyclass" id='requestoremail' type="text" placeholder="Enter your email address" name="requestoremail" >
<label for="purpose"><strong>Purpose</strong></label>
<input class="keyclass" id='purpose'type="text" placeholder="Enter purpose " name="purpose" >
</div>
<button form="form1">Submit</button>
</form>
<script>
$(".keyclass").attr('required',true);
</script>
</body>
</html>
Related
Some websites have a greyish text written in the blanks next to the credentials required, for exampl Gmail (I'm not allowed to add pictures, sadly), however, when you click in the box, the greyish text disappears. I have the following code in HTML but I don't know whether it's possible to add that feature or not:
<html>
<head>
<title>My code</title>
</head>
<body>
<h1>Registration form</h1>
<form>
<fieldset>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email</label>
<input type="email" id="Email" name="Email"><br><br>
<label for="password">Password</label>
<input type="password" id="Password" name="Password">
</fieldset>
</form>
</body>
</html>
When I run this code, the boxes/fields appear empty and don't show the greyish text (like 'Email'). Can anyone tell me how to add that feature using HTML?
You can use placeholder attribute.
<input type="text" placeholder="hello">
Note:
You can change the styles of the placeholder using css ::placeholder pseudo element.
Edit:
If you want to hide the placeholder when focused do this:
#myInput:focus::placeholder{
color: transparent;
}
<input type="text" placeholder="hello" id="myInput">
You need to add the attribute called placeholder in html
<html>
<head>
<title>My code</title>
</head>
<body>
<h1>Registration form</h1>
<form>
<fieldset>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" placeholder="First Name"><br><br>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" placeholder="Last Name"><br><br>
<label for="email">Email</label>
<input type="email" id="Email" name="Email" placeholder="Email"><br><br>
<label for="password">Password</label>
<input type="password" id="Password" name="Password" placeholder="Password">
</fieldset>
</form>
</body>
</html>
I am writing the following HTML code which requires certain input values and has a submit button which redirects to a different site when clicked. Currently the Submit button redirects even if no value is entered into the input boxes. I want the submit button to only work if all the input values are filled.
<!DOCTYPE html>
<html>
<body>
<h3>Please enter the following information</h3>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="" required><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="" required><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email" value="" required><br>
<label for="UserID">UserID:</label><br>
<input type="text" id="UserID" name="UserID" value="" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" value="" required><br><br>
<input onclick="window.location.href = 'https://example.site';" type="submit" value="Submit" />
</form>
</body>
</html>
The reason is because your submit isn't properly structured.
You see, if you replace your input submit with a button, it works perfectly:
<!DOCTYPE html>
<html>
<body>
<h3>Please enter the following information</h3>
<form action="https://example.site">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="" required><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="" required><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email" value="" required><br>
<label for="UserID">UserID:</label><br>
<input type="text" id="UserID" name="UserID" value="" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" value="" required><br><br>
<button>Submit</button>
</form>
</body>
</html>
All you would have to change is add the link which you want it to redirect to in the action defined in the form.
This is the recommended method.
Keep in mind that you should always perform server-side checks regardless of whether there is a required attribute in the input field, as it can easily be removed.
<form id="contact_form" action="/contact-verzenden" method="POST" enctype="multipart/form-data" >
<input class="textbox" type="text" name="name" id="name" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Naam':this.value;" value="Jouw naam" required/>
<input class="textbox" type="text" name="name" id="tel" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Telefoon':this.value;" value="Telefoon" required/>
<input class="textbox" type="text" name="email" id="email" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'E-mail':this.value;" value="E-mail" required/>
<textarea rows="6" cols="30" type="text" name="message" id="message" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Vraag/opmerking':this.value;" required >Vraag/opmerking</textarea>
<input id="submit_button" type="submit" value="Verzenden" />
</form>
When I click submit, the data sends regardless of whether something has been entered or not.
Even though it's exactly the same as the W3 schools example:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_required
What am I doing wrong?
Because you still have value in every input elements.
Try using placeholder to make it look like your design.
<input class="textbox" type="text" name="name" id="name" placeholder="test" required/>
check this code:
<!DOCTYPE html>
<form id="contact_form" method="POST" enctype="multipart/form-data" >
<input class="textbox" type="text" name="name" id="name" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Naam':this.value;" placeholder="Jouw naam" required/>
<input class="textbox" type="text" name="name" id="tel" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Telefoon':this.value;" placeholder="Telefoon" required/>
<input class="textbox" type="text" name="email" id="email" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'E-mail':this.value;" placeholder="E-mail" required/>
<textarea rows="6" cols="30" type="text" name="message" id="message" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Vraag/opmerking':this.value;" required ></textarea>
<input id="submit_button" type="submit" value="Verzenden" />
</form>
</html>
Because you are already giving him value (value="Jouw naam") and also onblur you are giving it a value ("Naam"). So the value is never empty. That`s why it is submitting the form.
Add placeholder="Jouw naam" instead of value = "Jouw naam"
Hope it helps !!
Hi I have problem with open thankyoupage in new tab. How I can fix it please ? Because When I use iframe plugin that I must use it only open in iframe window. THANKS
I have this HTML code :
<div id="sideOpt">
<form method="post" name="email" action="http://www.gogvo.com/subscribe.php">
<div>
<input id="sideInput" type="email" name="Email" onblur="javascript: if(this.value==''){this.value='Vložte Vaši Emailovou Adresu';}" onfocus="javascript:this.value=''" value="Vložte Vaši Emailovou Adresu" title="Vložte Vaši Emailovou Adresu">
<input id="sideSend" type="submit" value="">
</div>
<div>
<input type="hidden" name="Campaign" value="8e89d34ffa27" />
<input type="hidden" name="AffiliateName" value="ErikPiovarci" />
<input type="hidden" name="ThankyouPage" value="http://www.simplemoneysystem.cz/rs/APkKib" />
<input type="hidden" name="OptIn" value="" />
<input type="hidden" name="FirstName" value="Odběratel">
<input type="hidden" name="AL" value="1">
<input type="hidden" name="LS" value="10">
</div>
</form>
Add target="_blank" to your form tag.
<form method="post" name="email" target="_blank" action="http://www.gogvo.com/subscribe.php">
The following code should have all the fields with input required, but when I run it in Chrome Version 26.0.1410.64 m, after I press the submit button, only the first field (e.g., name) is labeled as "This field is required." I used the example here: http://www.raymondcamden.com/demos/2012/jul/30/round2/register.html
save the html, and his local javascript, the example code works properly except the "This field is required." is in red. What's wrong here? Please help :(
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script src="jquery.validate.js"></script>
<script>
$(document).on("pageshow", "#somePage", function() {
$("#someForm").validate();
});
</script>
</head>
<body>
<div data-role="page" id="somePage">
<div data-role="content">
<form id="someForm" method="get" action="">
<fieldset>
<label>Name</label>
<input id="name" size="25" class="required"/>
</fieldset>
<fieldset>
<label">E-Mail</label>
<input id="email" size="25" class="required"/>
</fieldset>
<fieldset>
<label">Your comment</label>
<textarea id="comment" cols="22" class="required"></textarea>
</fieldset>
<input type="submit" value="Submit"/>
</form>
</div> <!--content-->
</div>
</body>
</html>
You have double quotes in label tags that make your html invalid
<label">E-Mail</label>
^
Use for attribute in label tags and name in inputs
This being said change
<fieldset>
<label>Name</label>
<input id="name" size="25" class="required"/>
</fieldset>
<fieldset>
<label">E-Mail</label>
<input id="email" size="25" class="required"/>
</fieldset>
<fieldset>
<label">Your comment</label>
<textarea id="comment" cols="22" class="required"></textarea>
</fieldset>
to
<fieldset>
<label for="name">Name</label>
<input name="name" id="name" size="25" class="required"/>
</fieldset>
<fieldset>
<label for="email">E-Mail</label>
<input name="email" id="email" size="25" class="required"/>
</fieldset>
<fieldset>
<label for="comment">Your comment</label>
<textarea name="comment" id="comment" cols="22" class="required"></textarea>
</fieldset>
Here is jsFiddle