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>
I have used a multistep form and I am using "required" attribute in some of the input fields. As such
<input type="text" placeholder="Full name" id="name" name="name" required="Please enter your full name">
The user fills one form and clicks next and after three nexts he can submit.
But the required attribute triggers only when the I click the submit button.I want the user to fill all the fields before he clicks next on the form. By that I mean that the required must trigger on the next button.
You can run an function to check if the input field is empty, then add the required attribute to the input element.
Example code:
function checkValue() {
var name = document.getElementById("name");
if(name.value === "") {
var att = document.createAttribute("required");
name.setAttributeNode(att);
}
}
<form>
<input type="text" placeholder="Full name" id="name" name="name">
<button onclick = "checkValue()">Next</button>
</form>
Hope this helps !
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 was wondering, is there a way to put text into an input field?
What i've got now is a placeholder, but that's actually an empty inputfield. So that's not what i'm looking for.
I'm looking for an (kind of) placeholder that's actually filled in into the input field, so not "background text"
This is with placeholder:
And this is what i want:
Is there any way to do this?
The value content attribute gives the default value of the input element.
- http://www.w3.org/TR/html5/forms.html#attr-input-value
To set the default value of an input element, use the value attribute.
<input type="text" value="default value">
All you have to do is use the value attribute of input tags:
<input type="text" value="Your Value" />
Or, in the case of a textarea:
<textarea>Your Value</textarea>
You seem to look for the input attribute value, "the initial value of the control"?
<input type="text" value="Morlodenhof 7" />
https://developer.mozilla.org/de/docs/Web/HTML/Element/Input#attr-value
<input type="text" value="Your value">
Use the value attribute for the pre filled in values.
TO give the prefill value in HTML Side as below:
HTML:
<input type="text" id="abc" value="any value">
JQUERY:
$(document).ready(function ()
{
$("#abc").val('any value');
});
I am using the following style attribute to set the user input to uppercase so that when the user starts typing in the text box for example railway, then it should be altered to capital letters like RAILWAY without the user having to press the Caps-lock button.
This is the code I am using for the input:
<input type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0" style='text-transform:uppercase'/>
But I am not getting the desired output by using this attribute.
You've put the style attribute on the <img> tag, instead of the <input>.
It is also not a good idea to have the spaces between the attribute name and the value...
<input type="text" class="normal"
name="Name" size="20" maxlength="20"
style="text-transform:uppercase" />
<img src="../images/tickmark.gif" border="0" />
Please note this transformation is purely visual, and does not change the text that is sent in POST.
NOTE: If you want to set the actual input value to uppercase and ensure that the text submitted by the form is in uppercase, you can use the following code:
<input oninput="this.value = this.value.toUpperCase()" />
I think the most robust solution that will insure that it is posted in uppercase is to use the oninput method inline like:
<input oninput="this.value = this.value.toUpperCase()" />
EDIT
Some people have been complaining that the cursor jumps to the end when editing the value, so this slightly expanded version should resolve that
<input oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);" />
The answers with the text-transformation:uppercase styling will not send uppercased data to the server on submit - what you might expect. You can do something like this instead:
For your input HTML use onkeydown:
<input name="yourInput" onkeydown="upperCaseF(this)"/>
In your JavaScript:
function upperCaseF(a){
setTimeout(function(){
a.value = a.value.toUpperCase();
}, 1);
}
With upperCaseF() function on every key press down, the value of the input is going to turn into its uppercase form.
I also added a 1ms delay so that the function code block triggers after the keydown event occured.
UPDATE
Per recommendation from Dinei, you can use oninput event instead of onkeydown and get rid of setTimeout.
For your input HTML use oninput:
<input name="yourInput" oninput="this.value = this.value.toUpperCase()"/>
The problem with the first answer is that the placeholder will be uppercase too. In case you want ONLY the input to be uppercase, use the following solution.
In order to select only non-empty input element, put required attribute on the element:
<input type="text" id="name-input" placeholder="Enter symbol" required="required" />
Now, in order to select it, use the :valid pseudo-element:
#name-input:valid { text-transform: uppercase; }
This way you will uppercase only entered characters.
try
<input type="text" class="normal"
style="text-transform:uppercase"
name="Name" size="20" maxlength="20">
<img src="../images/tickmark.gif" border="0"/>
Instead of image put style tag on input because you are writing on input not on image
Set following style to set all textbox to uppercase:
input { text-transform: uppercase; }
Using CSS text-transform: uppercase does not change the actual input but only changes its look.
If you send the input data to a server it is still going to lowercase or however you entered it. To actually transform the input value you need to add javascript code as below:
document.querySelector("input").addEventListener("input", function(event) {
event.target.value = event.target.value.toLocaleUpperCase()
})
<input>
Here I am using toLocaleUpperCase() to convert input value to uppercase.
It works fine until you need to edit what you had entered, e.g. if you had entered ABCXYZ and now you try to change it to ABCLMNXYZ, it will become ABCLXYZMN because after every input the cursor jumps to the end.
To overcome this jumping of the cursor, we have to make following changes in our function:
document.querySelector("input").addEventListener("input", function(event) {
var input = event.target;
var start = input.selectionStart;
var end = input.selectionEnd;
input.value = input.value.toLocaleUpperCase();
input.setSelectionRange(start, end);
})
<input>
Now everything works as expected, but if you have slow PC you may see text jumping from lowercase to uppercase as you type. If this annoys you, this is the time to use CSS, apply input: {text-transform: uppercase;} to CSS file and everything will be fine.
The issue with CSS Styling is that it's not changing the data, and if you don't want to have a JS function then try...
<input onkeyup="this.value = this.value.toUpperCase()" />
on it's own you'll see the field capitalise on keyup, so it might be desirable to combine this with the style='text-transform:uppercase' others have suggested.
Various answers here have various problems, for what I was trying to achieve:
Just using text-transform changes the appearance but not the data.
Using oninput or onkeydown changes the cursor position, so you can't, for instance, click in the middle of your existing input and edit it.
Saving the position works, but just seemed a bit kludgey.
It felt cleaner to me to just break the problem up into two parts: upper-casing what I'm typing while I type (text-transform), and upper-casing the submitted data (run toUpperCase onchange):
<input id = "thing" onchange="this.value = this.value.toUpperCase(); pr()" style=text-transform:uppercase /><p>
<b><span id="result"></span></b>
<script>function pr() {document.getElementById("result").innerHTML = document.getElementById("thing").value}</script>
Type something in that, hit return or click out of the input, then click in the middle of your previous entry, add some lc text, hit return...
IN HTML input tag just style it like follows
<input type="text" name="clientName" style="text-transform:uppercase" required>
in backed php/laravel use:
$name = strtoupper($clientName);
This will both show the input in uppercase and send the input data through post in uppercase.
HTML
<input type="text" id="someInput">
JavaScript
var someInput = document.querySelector('#someInput');
someInput.addEventListener('input', function () {
someInput.value = someInput.value.toUpperCase();
});
As nobody suggested it:
If you want to use the CSS solution with lowercase placeholders, you just have to style the placeholders separately. Split the 2 placeholder styles for IE compatibility.
input {
text-transform: uppercase;
}
input:-ms-input-placeholder {
text-transform: none;
}
input::placeholder {
text-transform: none;
}
The below input has lowercase characters, but all typed characters are CSS-uppercased :<br/>
<input type="text" placeholder="ex : ABC" />
<input style="text-transform:uppercase" type = "text" class = "normal" name = "Name" size = "20" maxlength = "20"> <img src="../images/tickmark.gif" border="0"/>
I went with the style text-transform:uppercase thing from poster. Then I just did the uppercase thing in php as well. Some people working too hard with that javascript.
You were close with the style being in the wrong place. You were trying to uppercase an image instead of the input.
$name = strtoupper($_POST['Name']);
I don't know why I wanted to throw in some extra stuff if it's a php page. This is something I like to do make it smoother for the person filling out the form.
<input style="text-transform:uppercase" type = "text" class = "normal" name = "Name" size = "20" maxlength = "20" value="<?php echo $name; ?>"> <img src="../images/tickmark.gif" border="0"/>
That's assuming you're using PHP as the backend and posting to the same page you are on. This will keep the user from having to fill out that part of the form again. Less annoying for the person filling out the form.
Try below solution, This will also take care when a user enters only blank space in the input field at the first index.
document.getElementById('capitalizeInput').addEventListener("keyup", () => {
var inputValue = document.getElementById('capitalizeInput')['value'];
if (inputValue[0] === ' ') {
inputValue = '';
} else if (inputValue) {
inputValue = inputValue[0].toUpperCase() + inputValue.slice(1);
}
document.getElementById('capitalizeInput')['value'] = inputValue;
});
<input type="text" id="capitalizeInput" autocomplete="off" />
Just use this oninput in your input field:
<div class="form-group col-2">
<label>PINCODE</label>
<input type="number" name="pincode" id="pincode" class="form-control" minlength="6" maxlength="6" placeholder="Enter Pincode" oninput="this.value = this.value.toUpperCase()" autocomplete="off">
</div>
Just add in your input(style="text-transform:uppercase")
<input type="text" class="normal" style="text-transform:uppercase" name="Name" size="20" maxlength="20">
<script type="text/javascript">
function upperCaseF(a){
setTimeout(function(){
a.value = a.value.toUpperCase();
}, 1);
}
</script>
<input type="text" required="" name="partno" class="form-control" placeholder="Enter a Part No*" onkeydown="upperCaseF(this)">