Is it possible to make either loginid or email as required, just by using CSS or HTML (instead of using Javascript)?
<html>
<body>
<form>
<!-- Atleast one field should be filled by user -->
<label>loginid</label>
<input required>
<label>email</label>
<input required>
</form>
</body>
</html>
Sorry, but it is not possible to use only CSS and HTML to make only one of the two fields "loginid" or "email" mandatory.
This type of functionality would require the use of JavaScript or other server-side technologies. Using :invalid and :valid with the required attribute is useful for form validation, but not for the logic of making specific fields mandatory.
Here is an example of how to make only one of "loginid" or "email" mandatory using JavaScript:
//This code checks if both the "loginid" and "email" fields are blank when the "Submit" button is clicked. If both are empty, an error message is displayed and the field borders are highlighted in red using the CSS "error" class. Otherwise, the "error" class is removed and the form is submitted.
document.getElementById("submitBtn").addEventListener("click", function(event) {
event.preventDefault();
var loginid = document.getElementById("loginid").value;
var email = document.getElementById("email").value;
if (!loginid && !email) {
document.getElementById("loginid").classList.add("error");
document.getElementById("email").classList.add("error");
alert("Either Login ID or Email is required");
} else {
document.getElementById("loginid").classList.remove("error");
document.getElementById("email").classList.remove("error");
// submit the form
}
});
.error {
border: 1px solid red;
}
<div>
<label for="loginid">Login ID:</label>
<input type="text" id="loginid">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email">
</div>
<button type="submit" id="submitBtn">Submit</button>
Related
I have seen similar questions but they were not asked the same way I want to ask my question.
How can I use javascript to make sure that the email a user provides matches with the email that I want them to provide before the form gets submitted after the user hits the submit button.
Elaboration:
The correct email address is badmansmo#gmail.com.
My form input placeholder shows b.........o#.....com as a hint.
If the user inputs any email that does not match with badmansmo#gmail.com
I want them to get an error message and the form should not be submitted.
How can I do this with javascript?
See my code below.
<form action='' method='POST' enctype="multipart/form-data">
<div class='item'>
<p><b><span style="color: red;">Email Address</span></b><span class='required'>*</span></p>
<input type="email" name="email" placeholder="ba******o#***.com" required=''/>
</div>
<div class='question'>
<center><p>Privacy Policy<span class='required'>*</span></p></center>
<div class='question-answer checkbox-item'>
<div>
<center><label class='check' for='check_1'><span>By submitting this form you agree to the terms of service privacy policy.</span></label></center>
</div>
</div>
</div>
<div class='btn-block'>
<center> <button href='/' type='submit' id="submitForm">Submit</button></center>
</div></form>
If I'm correct, you need to add and change a few things so it would work.
First, add an 'id' attribute to the email input field like this (so we can link the form to the javascript code later on):
input type="email" name="email" placeholder="ba******o#***.com" required='' id="email"/>
Then, add the following script at the beginning of the page (between the and the tags). This script compares the entered email and shows a message if they are not matching.
<script type="text/javascript">
function check_email()
{
var email = document.getElementById("email").value;
if(email.localeCompare("badmansmo#gmail.com")) {
alert("ERROR. Email does not match.");
return false;
}
return true;
}
Finally, add the 'onsubmit' attribute to the tag like this (if the function that checks the email returns false, then the form won't be sent):
<form action='' method='POST' enctype="multipart/form-data" onsubmit="return check_email();">
I hope this works for you :)
I am using the required attribute on certain fields in a form. When form is submitted, required fields that are not filled out get the standard red border around them. Is there a way to also change the background color of the required field that is not filled out after submitting? Here is just a sample textbox that I am using with the required attribute:
<input id="LastName" name="LastName" type="text" placeholder="Last Name" required/>
You can use CSS attribute selector like so:
input[required] {
background-color: red;
}
<input id="LastName" name="LastName" type="text" placeholder="Last Name"
required/>
This will select inputs with required attributes. Now, you can apply this with some simple JavaScript to achieve the desired effect:
var submit_button = document.getElementById("submit_button");
submit_button.addEventListener("click", function(e) {
var required = document.querySelectorAll("input[required]");
required.forEach(function(element) {
if(element.value.trim() == "") {
element.style.backgroundColor = "red";
} else {
element.style.backgroundColor = "white";
}
});
});
<input id="FirstName" name="FirstName" type="text" placeholder="First Name" required/>
<input id="LastName" name="LastName" type="text" placeholder="Last Name" required/>
<input id="submit_button" type="submit">
What this does is add an event listener when the submit button is clicked. When it is, it uses querySelectorAll to get all the inputs that match the CSS attribute selector, input[required]. Next, it does a for-each loop over the returned list of elements. Finally, it checks each inputs value, trimmed, to makes sure there's some content in there (spaces don't count). If there's nothing in the input, it sets the background color to red.
Notes:
You can tweak it as you like, make sure to cancel whatever event you are handling if the inputs are invalid, and you can add classes for styles instead of using element.style.<style>.
You can change it using css as mentioned in some comments above, if it doesn't work then check whether parent background-color attribute is set, in that case you can use !important tag to enforce for the child.
Hello you can try this by basic Css
:required {
background: red;
}
Or using jQuery easily it will work dynamically On button click the background color will be red hope it helps.
the html code
<input id="LastName" name="LastName" type="text" placeholder="Last Name"
required/>
<input id="sub" type="button">
and the jquery code
<script>
$('#sub').click(function(){
$('#LastName').each(function() {
if($(this).val() == '') {
$(this).css('background-color' , '#FF0000');
$(this).attr("placeholder", "Required");
}
});
});
</script>
But if you want to do this for an entire form then it will be something like below
<script>
$('#sub').click(function(e){ //submit button name
e.preventDefault()
$('.required').each(function() { //a constant class for evert input item
if($(this).val() == '') {
$(this).css('background-color' , '#FF0000');
$(this).attr("placeholder", "Required");
}
});
});
</sctript>
see the below fiddle
required Fiddle
must add inside head jQuery Library
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
input[type="text"],lastname {
background-color : red;
}
body input:focus:required:invalid,
body textarea:focus:required:invalid {
color: green;
}
I have this code:
<span class="field">
<input type="text" id="first-name" placeholder="First Name" required />
<label for="first-name">First Name</label>
</span>
<span class="field">
<input type="text" id="last-name" placeholder="Last Name" />
<label for="last-name">Last Name</label>
</span>
Label for the second input ("Last Name") is visible from the beginning and not only on focus like the "First Name" label. The difference between two inputs is only in attribute "required" which I don't need for the "Last Name" field.
How to make label for input without attribute "required" hidden? I need it to be shown only on focus with the transition effect. The same like this work for "First Name" field.
http://jsfiddle.net/dmitriy_kalmykov/68jmbquy
You could use the adjacent sibling selector. Add the following code to your CSS file.
input[required] + label {
display: none;
}
What about using required for the last-name field too, but overwriting the required attribute for the last-name input by javascript while submiting the form.
document.getElementById("last-name").required = false;
I know this question was asked 9 month ago, but this can help somebody in future.
I guess you can't submit the form because all fields with float labels should be with the required attribute.If you leave a field empty, the form won't submit. If you remove the attribute, the label is visible and you can submit the form, but the idea of floating labels is ruined.
If I am correct, then try this code:
$( document ).ready(function() {
$('#sub-btn').click(function validateForm() {
var isValid = true;
$('.field').each(function() {
if ( $(this).val() === '' )
$(this).removeAttr("required");
});
return isValid;
});
});
It works for me. You should set the submit button with id="sub-btn" so when you click it, it will clean the required properties.
am using bootstrap.css file for my form and in input box i have added a option required=""
so that when client submit data before entering data in therequired="" text box
form will show warning message that please fill that form
and this is my <input type="text" name="type" id="type-1" value="buy" required="">
now my question is
how do i make that input box red when warning box appear
you can do this simply with jquery see my example below
<input type="text" id="demo"/>
<input type="button" id="btn" value="submit"/>
$("#btn").click(function(){
var text = $("#demo").val();
if(text === ""){
$("#demo").css({"border" : "1px solid red", "color" : "red"}).val("this is required");
}else{
// the function you want to do with the form
}
});
Here is a JSFIDDLE
you would need to build on this a little but it gives you the basic idea
EDIT i edited the jsfiddle to work better
New JSFIDDLE
How can I display the icon "valid", if the "comfirm password" field text is identic to "password" text? Simillar to the name and email fields in the example.
Here is the css code for email verification and name:
input[type=text]:required:valid,[type=email]:required:valid,textarea:required:valid{
background:url(valid.png) 90% center no-repeat #FFF ;
}
Example:
http://data.imagup.com/10/1160658139.JPG
CSS is not a programming language.
You have to validate your fields on server-side or even on client-side with Javascript.
With the current HTML5 implemation in modern browser you can check for the value of inputs. But as far as i know you can't check for the same value only with pure css.
<input type="password" id="pass" name="pass" required pattern="[A-Z]{3}[0-9]{4}"
title="Password numbers consist of 3 uppercase letters followed by 4 digits."/>
Take a look at The constraint validation api
Here is an example of how you can check emails for similarity using the api mentioned above.
<label>Email:</label>
<input type="email" id="email_addr" name="email_addr">
<label>Repeat Email Address:</label>
<input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)">
<script>
function check(input) {
if (input.value != document.getElementById('email_addr').value) {
input.setCustomValidity('The two email addresses must match.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>