Below is part of my CSS code for HTML. I want all the inputs to be filled when the button "register" is pressed. If I don't have an address, a little pop-up warning comes right up to the input field. I would like the same with a drop-down menu. I know the code gives you the warning when the button "register" is pressed because of the JavaScript code. But I am wondering: is it possible to change the location of that warning from the "register" button to the drop-down menu?
Thank you for all your help.
<html lang="en">
<body>
<div class="container">
<form class="form-signin" role="form" method="post" action=".">
<div class="form-group">
<label for="adress" class="form-text">Adress</label>
<input type="text" class="form-control" id="adress" placeholder="Rainbow 3" name="adress" required>
</div>
<div class="form-row">
<div class="form-group col-md-8" style="height:70px">
<label for="inputState" class="form-text">State</label>
<select id="inputState" class="form-control" name="state" required>
<option selected disabled value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<button href="/oglasi/" type="submit" class="btn btn-outline-secondary" role="button" aria-pressed="true" onclick="check(this)">Register</button>
</div>
<script language='javascript' type='text/javascript'>
function check(input) {
if (document.getElementById('inputState').value == "0") {
input.setCustomValidity('Choose state.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
<br>
</form>
</div>
</body>
</html>
you need setCustomValidity to select element
function check(input) {
const inputStateElm = document.getElementById('inputState');
if (inputStateElm.value == "0") {
inputStateElm.setCustomValidity('Choose state.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
--
Full code
<html lang="en">
<body>
<div class="container">
<form class="form-signin" role="form" method="post" action=".">
<div class="form-group">
<label for="adress" class="form-text">Adress</label>
<input type="text" class="form-control" id="adress" placeholder="Rainbow 3" name="adress" required>
</div>
<div class="form-row">
<div class="form-group col-md-8" style="height:70px">
<label for="inputState" class="form-text">State</label>
<select id="inputState" class="form-control" name="state" required>
<option selected disabled value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<button href="/oglasi/" type="submit" class="btn btn-outline-secondary" role="button" aria-pressed="true" onclick="check(this)">Register</button>
</div>
<script language='javascript' type='text/javascript'>
function check(input) {
const inputStateElm = document.getElementById('inputState');
if (inputStateElm.value == "0") {
debugger;
inputStateElm.setCustomValidity('Choose state.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
<br>
</form>
</div>
</body>
</html>
Related
I am developing a form in AMP, within this form, there is a register of students for enrollment. Users (parents) will be able to add two more students to the same registration. However, when I click to add another student, with all required forms filled out, amp-moustache displays the success message before clicking the submit button. When the new student is added by the user, the form is also required.
Sorry for my bad english.
<script src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<!-- required fields -->
<div class="form-group">
<label for="" class="label-forms">Name 1: *</label>
<input name="" type="text" class="" required>
</div>
<br/>
<button id="add-2" class="button" hidden on="tap:e2.hide,add-2.hide,remove-2.show, AMP.setState({customvalue: ''})">Remove Name 2...</button>
<button id="remove-2" class="button" on="tap:e2.show,remove-2.hide,add-2.show, AMP.setState({customvalue: 'true'})">Add Name 2...</button>
<div id="e2" hidden>
<input name="" type="text" class="" [required]="customvalue">
<div id="div-edu2" class="form-group">
<select name="" class="input-default" [required]="customvalue">
<option value="1" selected>A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</div>
<button id="add-3" class="button" hidden on="tap:e3.hide,add-3.hide,remove-3.show, AMP.setState({customvalue2: ''})">Remove Name 3...</button>
<button id="remove-3" class="button" on="tap:e3.show,remove-3.hide,add-3.show, AMP.setState({customvalue2: 'true'})">Add Name 3...</button>
<div id="e3" hidden>
<input name="" type="text" class="" [required]="customvalue2">
<div id="div-edu3" class="form-group">
<label class="label-forms" for="">Select 3: *</label>
<select name="" class="input-default" [required]="customvalue2">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
</div>
</div>
</div>
<!-- ... -->
<div class="col-10 mx-auto">
<input type="submit" value="Send">
</div>
<div submit-success>
<template type="amp-mustache">
<p class="text-center">Success!</p>
</template>
</div>
<div submit-error>
<template type="amp-mustache">
<p class="text-center">Fail.</p>
</template>
</div>
IMG 1 - FORM
IMG 2 - ON CLICK ADD BUTTON
IMG 3 - AMP MESSAGE
I simply solved this problem by changing the html tag from <button> to <a></a>. Solved it, but I still haven't figured out the reason for the problem with the button.
I'm doing a contact form with validation via JS using jquery. In the form all fields are validated besides the tag. How can I validate this?
See code below to see how the others have been validated.
var date = $("#date").val();
var time = $("#time").val();
if (date == "") {
$("#date-info").html(" *");
$("#date") // .css('border', '#e66262 1px solid');
valid = false;
}
if (time == "") {
$("#time-info").html(" *");
$("#time") // .css('border', '#e66262 1px solid');
valid = false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="column" id='column1'>
<div class="txtb">
<label>Prefered Date</label><span id="date-info" class="info"></span><br /> <input type="date" class="input-field" name="date" id="date" />
</div>
</div>
<div class="column" id='column2'>
<div class="txtb">
<label>Prefered Time</label><span id="time-info" class="info"></span><br />
<select class="input-field" name="time" id="time">
<option value="Morning">Morning: 9am - 12pm</option>
<option value="Afternoon">Afternoon: 12pm - 5pm</option>
<option value="Evening">Evening: 5pm - 9pm</option>
</select>
</div>
</div>
</div>
You can use the following code snippet:
<form>
<label>Prefered Time</label><span id="time-info" class="info"></span><br />
<select class="input-field" name="time" id="time" required>
<option value="">None</option>
<option value="Morning">Morning: 9am - 12pm</option>
<option value="Afternoon">Afternoon: 12pm - 5pm</option>
<option value="Evening">Evening: 5pm - 9pm</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
While clicking on the submit button will trigger the validation. Use the following 'required' class attribute.
<select id="select" class="required">
I have a dropdown in which when I select 'one' only then my input appears. That input is required field. What I want is when user select 'one' only then validation on the input works and hence on save button it shows error but if it selects other values or no value then on save it doesn't show validation error.
<form name="myForm" data-ng-submit="save(myForm.$valid)"novalidate="novalidate">
<div class="form-group">
<label class="col-md-6">Select:</label>
<select class="col-md-2" ng-model="val.value">
<option value="1" selected>one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
<div ng-show="val.value=='1'">
<label class="col-md-3">one:</label>
<input type="number" class="col-md-4" ng-model="val.one" name="valOne" data-ng-class="{'has-error':myForm.valOne.$dirty && myForm.valOne.$invalid }" required="required"/>
<div class="col-md-2" data-ng-messages="myForm.valOne.$error"
data-ng-show="myForm.valOne.$touched ||myForm.$submitted">
<div class="error-message" data-ng-message="required">Please enter Value
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-warning"><i class="fa fa-save"></i>
Save</button>
</form>
Please recommend something.
You can use ng-required:
<input type="number" class="col-md-4" ng-model="val.one" name="valOne" data-ng-class="{'has-error':myForm.valOne.$dirty && myForm.valOne.$invalid }" ng-required="val.value == 1"/>
I am using bootstrap, I wanted to know is there something like a feature in bootstrap to do this?
<div class="form-group">
<label class="col-sm-6 control-label" for="textinput">Flooring material </label>
<div class="col-sm-6">
<select class="form-control" name="flooring_meterial">
<option value="0">-Select-</option>
<option value="1" >Earth,sand</option>
<option value="2">Dung</option>
<option value="3">Wood/planks</option>
<option value="4">Parquet or polished wood</option>
<option value="5">other</option>
</select>
<input type="text" placeholder="Other" class="form-control" name="f_m_other">
</div>
</div>
I want to activate this bellow input field, if the above select field value is "other"
Since I could not able to find a short cut for this using bootstrap, I thought to write this in native javascript.
function disable(select_val,input_id) {
var e = document.getElementById(select_val);
var strUser = e.options[e.selectedIndex].value;
if(strUser === "100"){
document.getElementById(input_id).disabled = false;
}
else{
document.getElementById(input_id).value = document.getElementById(input_id).defaultValue;
document.getElementById(input_id).disabled = true;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-6 control-label" for="textinput">Principle mode of water supply</label>
<div class="col-sm-6">
<select class="form-control" name="water_supply" id="water_supply" onchange="disable('water_supply', 'w_s_other')">
<option value="0">-Select-</option>
<option value="1">Shared/ public well</option>
<option value="4">Private pipe line</option>
<option value="5">Stream/river</option>
<option value="100" >Other</option>
</select>
<input type="text" placeholder="Other" class="form-control" name="w_s_other" id="w_s_other" disabled value="">
</div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="textinput">x2</label>
<div class="col-sm-6">
<select class="form-control" name="water_supply" id="x2" onchange="disable('x2', 'x2other')">
<option value="0">-Select-</option>
<option value="1">Shared/ public well</option>
<option value="5">Stream/river</option>
<option value="100" >Other</option>
</select>
<input type="text" placeholder="Other" class="form-control" name="w_s_other" id="x2other" disabled value="">
</div>
</div>
Try using change event at select element to set input disabled to true if value of select element is "5" with .prop()
$("select").change(function() {
$("+ input", this).prop("disabled", !(this.value === "5"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="form-group">
<label class="col-sm-6 control-label" for="textinput">Flooring material </label>
<div class="col-sm-6">
<select class="form-control" name="flooring_meterial">
<option value="0">-Select-</option>
<option value="1" >Earth,sand</option>
<option value="2">Dung</option>
<option value="3">Wood/planks</option>
<option value="4">Parquet or polished wood</option>
<option value="5">other</option>
</select>
<input type="text" placeholder="Other" class="form-control" name="f_m_other" disabled="true">
</div>
</div>
I have a HTML like this:
<div class="search">
<input type="text" id="search_text" name="search_text" placeholder="Search by Name ...">
<select>
<option>Filter</option>
<option>By date</option>
<option>By size</option>
</select>
From: <input type="date" id="start_date" name="start_date">
To: <input type="date" id="end_date" name="end_date">
Size:<input type="text" id="size" name="size" placeholder="size">
<input type="submit" onclick="return search()" value="Search">
</div>
I want to show From: and To: only when By date is selected in filter and I want to show "Size" only when By size is selected in filter.
OK, I made an exception and did the coding for you!
Here's a jQuery solution:
Working example: http://jsfiddle.net/khRjq/
<div class="search">
<input type="text" id="search_text" name="search_text" placeholder="Search by Name ...">
<select id="selectmode">
<option value="">Filter...</option>
<option value="date">By date</option>
<option value="size">By size</option>
</select>
<div class="bydateinputs" style="display: none">
From: <input type="date" id="start_date" name="start_date">
To: <input type="date" id="end_date" name="end_date">
</div>
<div class="bysizeinputs" style="display: none">
Size:<input type="text" id="size" name="size" placeholder="size">
</div>
<input type="submit" onclick="return search()" value="Search">
</div>
JS:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
$('#selectmode').change(function()
{
if ($(this).val() == 'date')
{
$('.bydateinputs').show();
$('.bysizeinputs').hide();
}
if ($(this).val() == 'size')
{
$('.bydateinputs').hide();
$('.bysizeinputs').show();
}
});
});
</script>
First, put them into a div.
Filter
By date
By size
From:
To:
Size:
Then use jquery to handle select change event
$("select").change(function() {
if($(this).text == "By date")
{
$("div.size").hide();
$("div.from").show();
$("div.to").show();
}
else if($(this).text == "By size")
{
$("div.size").show();
$("div.from").hide();
$("div.to").hide();
}
else
{
$("div.size").hide();
$("div.from").hide();
$("div.to").hide();
}
});
If you don't want to include jQuery, you can follow this fiddle :
HTML :
<div class="search" id="searchDiv">
<input type="text" id="search_text" name="search_text" placeholder="Search by Name ..."/>
<select onchange="changeSearchType(this)">
<option value="">Filter</option>
<option value="dateinput">By date</option>
<option value="sizeinput">By size</option>
</select>
<div id="dateinput" style="display:none;">
From: <input type="date" id="start_date" name="start_date"/>
To: <input type="date" id="end_date" name="end_date"/>
</div>
<div id="sizeinput" style="display:none;">
Size:<input type="text" id="size" name="size" placeholder="size"/>
</div>
<input type="submit" onclick="return search()" value="Search">
</div>
JavaScript :
function changeSearchType(el){
var e = el.value,
divs = document.getElementById("searchDiv").getElementsByTagName('div');
for(var i = 0, l = divs.length; i < l ; i++){
divs[i].style.display = 'none';
}
if(e != '') document.getElementById(e).style.display = 'block';
}