I'm just getting started with web design and it may be a silly question. I haven't added JavaScript code yet, but what I need is that all the options/forms require input before the query is submitted, otherwise to get highlighted in red. Any help would be great.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form>
<label for="value1">Example1</label>
<select id="value1" required>
<option value="">--Select an option--</option>
<option value="opt1">1</option>
<option value="opt2">2</option>
</select>
<label for="value2">Example2</label>
<select id="value2" required>
<option value="">--Select an option--</option>
<option value="Normal">Normal</option>
<option value="Superior">Superior</option>
</select>
</form>
<label for="date1">date1</label>
<input type="date" id="firstDate" required>
<label for="date2">date2</label>
<input type="date" id="secondDate" required>
<label for="value3">example3</label>
<input type="number" id="exampleNumber" required>
<button type="button" id="button1" required>button1</button>
</body>
</html>
Are you expecting like this:
The below given code can be used to validate each and each field more specifically.
Also i have added :focus selector in order to highlight if the input data is not given.If the input data is not given it will be highlighted in red.
function validate(){
if(document.rform.fname.value==""){
alert("Enter Your First Name");
document.rform.fname.focus();
return false;
}
if(document.rform.lname.value==""){
alert("Enter Your Last Name");
document.rform.lname.focus();
return false;
}
if(document.rform.address.value==""){
alert("Enter Your address");
document.rform.address.focus();
return false;
}
var val = document.getElementById('mobilenumber').value;
if (val.length < 10 || val.length > 12 ) {
alert("Enter a valid phone number")
return false; // keep form from submitting
}
if(document.rform.city.value==""){
alert("Enter your city name");
document.rform.city.focus();
return false;
}
if(document.rform.pincode.value==""){
alert("Enter a valid pin number");
document.rform.pincode.focus();
return false;
}
if(document.rform.email.value==""){
alert("Enter your Mail Id");
document.rform.email.focus();
return false;
}
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(document.rform.email.value.match(mailformat))
{
document.rform.email.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.rform.email.focus();
return false;
}
return true;
}
.inputs:focus{
box-shadow: 0 0 10px #ff0000;
border-color: #ff0000;
outline: none !important;
}
<form method="POST" name="rform" action=" " onsubmit="return(validate());">
<label for="right-label" class="right inline">First Name</label>
<input class="inputs" type="text" id="right-label" placeholder="First Name" name="fname" requried>
<br>
<label for="right-label" class="right inline">Last Name</label>
<input class="inputs" type="text" id="right-label" placeholder="Last Name" name="lname" requried>
<br>
<label for="right-label" class="right inline">Address</label>
<input class="inputs" type="text" id="right-label" placeholder="Address" name="address" requried>
<br>
<label for="right-label" class="right inline">City</label>
<input class="inputs" type="text" id="right-label" placeholder="City" name="city" requried>
<br>
<label for="right-label" class="right inline">Pin Code</label>
<input class="inputs" type="number" id="right-label" placeholder="Pincode" name="pincode" requried>
<br>
<label for="right-label" class="right inline">E-Mail</label>
<input class="inputs" type="email" id="right-label" placeholder="Mail Id" name="email" requried>
<br>
<label for="right-label" class="right inline">Mobile Number</label>
<input class="inputs" type="number" id="mobilenumber" placeholder="Mobile Number" name="mobile_num" requried>
<br>
<input type="submit" id="right-label" value="Register" name="submit" >
<input type="reset" id="right-label" value="Reset">
</form>
You can add hidden error class below every input fields. You can validate the form using javascript and jquery. If the input is wrong you can make the error class appear.
HTML :
<form method="POST" id="register_form" action=" " autocomplete="off">
<label for="right-label" class="right inline">First Name</label>
<input class="inputs" type="text" id="firstName" placeholder="First Name">
<small id="fn_error" class="form-text text-muted"></small>
<br>
<label for="right-label" class="right inline">Last Name</label>
<input class="inputs" type="text" id="lastName" placeholder="Last Name">
<small id="ln_error" class="form-text text-muted"></small>
<br>
<input type="submit" id="right-label" value="Register" name="submit" >
<input type="reset" id="right-label" value="Reset">
</form>
JS :
$('#register_form').on("submit",function () {
var firstName= $("#firstName");
var lastName= $("#lastName");
var status = false;
if (firstName.val() == "") {
firstName.addClass("borer-danger");
$("#fn_error").html("<span class='text-danger'>Please Enter Email</span>");
status = false;
} else {
firstName.removeClass("border-danger");
$("#fn_error").html("");
status = true
}
if (lastName.val() == "") {
lastName.addClass("borer-danger");
$("#ln_error").html("<span class='text-danger'>Please Enter Last Name</span>");
status = false;
} else {
lastName.removeClass("border-danger");
$("#ln_error").html("");
status = true
}
if (status == true) {
alert("Ready");
}
})
Related
I'm using this jQuery script to focus onto next input when enter pressed:
$(function() {
$(".form >input").on('keyup', function(e) {
if (e.which === 13) {
$(this).next('input').focus();
}
});
});
It does work with this basic skinny HTML form
<div class="form">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
But not with this one
<div class="form">
<input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus /><br>
<input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" /><br>
<input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" /><br>
<input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" /><br>
<input name="cislo5" type="text" class=cislo5 placeholder="" id="cislo5" /><br>
<input name="cislo6" type="text" class=cislo6 placeholder="" id="cislo6" /><br>
<input name="cislo7" type="text" class=cislo7 placeholder="" id="cislo7" /><br>
<input name="cislo8" type="text" class=cislo8 placeholder="" id="cislo8" /><br>
<input name="cislo9" type="text" class=cislo9 placeholder="" id="cislo9" /><br>
<input name="cislo10" type="text" class=cislo10 placeholder="" id="cislo10" /><br>
<input name="cislo11" type="text" class=cislo11 placeholder="" id="cislo11" /><br>
</div>
What seems to be the problem here? Help me please, I'm stuck
The issue here is you are using direct child selector like:
$(".form > input")
This only matches any direct input element inside form class, but in your next example input is not the direct child. So, you need to descent sector instead like:
$(".form input")
This will match any input inside the form class where it is a direct child or not.
Also, you need to replace
$(this).next('input').focus();
with this:
$(this).nextAll('input:first').focus();
This is needed because .next() will get the immediately following sibling of each element, but here input is not the immediate sibling. We also have some <br> in between which are causing the issue. This can be resolved using .nextAll('input:first') instead.
Demo:
$(function() {
$(".form input").on('keyup', function(e) {
if (e.which === 13) {
$(this).nextAll('input:first').focus();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
<p class="cislo">
<input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo1.value=cislo1.value.slice(0,2)" /><br>
<input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo2.value=cislo2.value.slice(0,2)" /><br>
<input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo3.value=cislo3.value.slice(0,2)" /><br>
<input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo4.value=cislo4.value.slice(0,2)" /><br>
</p>
</div>
I would like to hide the submit button of a html form until the required fields are entered, could anyone tell me how to do so?
here are my codes:
<form name="signup" action="mailto:chowhiuyu#gmail.com" method="post" enctype="text/plain">
Enter Student ID:
<input type="text" name="student_ID" size="30%" required >
<br>Gender: <input type="radio" name="gender" value="male" required>Male <input type="radio" name="gender" value="Female" required>Female
<br>Form:<select name="Form" required>
<option value="F1">F1</option>
<option Value="F2">F2</option>
<option value="F3">F3</option>
<option value="F4">F4</option>
<option value="F5">F5</option>
<option value="F6">F6</option>
</select>
<br>Electives chosen:
<input type="checkbox" name="Elective" value="Physics">Physics
<input type="checkbox" name="Elective" value="Chemistry">Chemistry
<input type="checkbox" name="Elective" value="Biology">Biology
<br>
<input type="checkbox" name="Elective" value="History">History
<input type="checkbox" name="Elective" value="Chinese History">Chinese History
<input type="checkbox" name="Elective" value="Music">Music
<input type="checkbox" name="Elective" value="Englit">English Literature
<br>
<input type="checkbox" name="Elective" value="Physical Education">Physical Education
<input type="checkbox" name="Elective" value="Visual Arts">Visual Arts
<input type="checkbox" name="Elective" value="business">Business Management
<input type="checkbox" name="Elective" value="Accounting">Accounting
<br>
Password:
<input type="password" name="password" placeholder="Password" id="password" size="30%" required>
<br>Re-enter Password:
<input type="password" name="password_check" placeholder="Confirm Password" id="confirm_password" size="30%" required>
<p>
<input type="submit" name="submit" value="Submit" onclick="window.alert('Your Request will be processed soon!');">
<input type="reset" name="Reset" Value="Reset">
</p>
Check out this http://jsfiddle.net/qKG5F/641/
(function() {
$('form > input').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
It will keep the button disabled if there is at least one field is empty.
I have a form that has has almost all input types are required, Like the HTML below:
<p>Name:*</p>
<input type="text" name="Name" required>
<p>Company Name: </p>
<input type="text" name="Company_Name">
<p>Email: *</p>
<input type="email" size="30" name="Email" required>
<p>Phone:*</p>
<input type="text" name="Phone" required>
At the end of the form, I have a checkbox that states,
<div class="checkbox">
<input type="checkbox" name="checkbox_name[]" >
<p>I'm Going</p>
<input type="checkbox" name="checkbox_name[]" >
<p>thanks, but I can't go</p>
<input type="checkbox" name="checkbox_name[]" required>
<p>I have read the above information</p>
Is there a way I can "de-require" the above input types if and only if the "Thanks, but I can't go" checkbox is marked?
Check this out. It changes `required attribute based on the checkbox I'm Going or not.
You can modify it as you need. I hope you got the idea.
<p>Name:*</p>
<input type="text" name="Name" class="formElem" required>
<p>Company Name: </p>
<input type="text" class="formElem" name="Company_Name">
<p>Email: *</p>
<input type="email" class="formElem" id="email" size="30" name="Email" required>
<p>Phone:*</p>
<input type="text" class="formElem" name="Phone" required>
<div class="checkbox">
<input id="ckbox" type="checkbox" name="checkbox_name[]" onchange="check()">
<p>I'm Going</p>
<input type="checkbox" name="checkbox_name[]">
<p>thanks, but I can't go</p>
<input type="checkbox" name="checkbox_name[]" required>
<p>I have read the above information</p>
<script>
function check() {
var temp = document.getElementsByClassName("formElem");
if (document.getElementById("ckbox").checked) {
for (var e = 0; e < temp.length; e++) { // For each element
var elt = temp[e];
elt.required = true;
}
} else {
for (var e = 0; e < temp.length; e++) { // For each element
var elt = temp[e];
elt.required = false;
}
}
}
</script>
I am using Formspree (which is awesome) except: I have set all my fields to required, when I try manually I can't submit a form without filling everything properly, and however I still get a bunch of blank forms coming through. Has anybody experienced / fixed this before?
Thanks!
<form action="https://formspree.io/XXXXXXXX" method="post">
<input name="_gotcha" style="display: none" type="text">
<input class="form-control input-lg" name="firstname" placeholder="First Name" required type="text">
<input class="form-control input-lg" name="lastname" placeholder="Last name" required type="text">
<input class="form-control input-lg" name="phone" placeholder="Phone number" required type="text">
<select required name="country" class="form-control input-lg" style="border-radius:none; -webkit-appearance: none; padding-top:0px;">
<option value="" disabled selected>Please select your country </option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="other">Not in the List</option>
<!-- etc -->
</select>
<input type="hidden" name="referrer" id="referrer_field" />
<input type="hidden" name="url" id="url_field" />
<button id="demo" type="submit">GO</button>
And this is another Solution for your code, as this will work even if somebody put "spaces or leave it with blank" in the field of Name or Phone.
Check the Fiddle..
// Bind the event handler to the "submit" JavaScript event
$('form').submit(function () {
// Get the Login Name value and trim it
var fname = $.trim($('#fname').val());
var lname = $.trim($('#lname').val());
var phon =$.trim($('#phon').val());
// Check if empty of not
if (fname === '') {
alert('First name is empty.');
return false;
}
else if (lname === '') {
alert('Last Name is empty.');
return false;
}
else if (phon === '') {
alert('Phone is empty.');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="https://formspree.io/XXXXXXXX" method="post">
<input name="_gotcha" style="display: none" type="text">
<input class="form-control input-lg" name="firstname" placeholder="First Name" id="fname" required type="text">
<input class="form-control input-lg" name="lastname" placeholder="Last name" id="lname" required type="text">
<input class="form-control input-lg" name="phone" placeholder="Phone number" id="phon" required type="text">
<select name="country" class="form-control input-lg" style="border-radius:none; -webkit-appearance: none; padding-top:0px;">
<option value="" disabled selected>Please select your country </option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="other">Not in the List</option>
<!-- etc -->
</select>
<input type="hidden" name="referrer" id="referrer_field" />
<input type="hidden" name="url" id="url_field" />
<button id="demo" type="submit">GO</button>
If somebody type space to the input box then this Jquery code will work and ask him to fill proper text in fields.
Try W3Schools example of
http://www.w3schools.com/tags/att_input_required.asp
<input class="form-control input-lg" name="firstname" placeholder="First Name" required >
with no equals or anything
I thought the required tag was
required="True/false"
A simple solution would be something like this.
You can do this by using JQuery
// Bind the event handler to the "submit" JavaScript event
$('form').submit(function () {
// Get the Login Name value and trim it
var name = $.trim($('#log').val());
// Check if empty of not
if (name === '') {
alert('Text-field is empty. You cannot leave is blank!');
return false;
}
});
.text-label {
color: #cdcdcd;
font-weight: bold;
}
#pwd{
margin:10px 18px;
}
#logBtn{
margin:10px 90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="login.php" method="post">
<label>Login Name:</label>
<input type="text" name="email" id="log" />
<br/>
<label>Password:</label>
<input type="password" name="password" id="pwd" />
<br/>
<input type="submit" id="logBtn" name="submit" value="Login" />
</form>
In my html I have a combo box which list all the available usertypes and then the input varies by what the user selects on the combo box so you can see that I have my onchange.
But my question is how would I be able to access the value of the selected combo box? Is it possible to get its selected value even it is not a part of the form? I've already tried to have only one form that is
<form action="" name="form1" method="post">
<select id="usertype" name="usertype" class="dropdown-select" onfocus="getPrevious()" onchange="set()" >
<option value="1" selected="selected">Chairperson</option>
<option value="2">Dean</option>
<option value="3">Faculty</option>
<option value="4">Staff</option>
<option value="6">Admin</option>
</select>
<div id="formpage_Chairperson" style="visibility: visible; display: block;">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="text" value="" name="D" />
<input type="text" value="" name="E" />
<input type="text" value="" name="F" />
<input type="Submit" value="Submit Form" name="submitForm" />
</div>
<div id="formpage_Chairperson" style="visibility: hidden; display: none;">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="Submit" value="Submit Form" name="submitForm" />
</div>
</form>
But when I clicked the Submit Form nothing happens. You can see that I'm choosing only what to display because different usertypes (e.g. Chairperson, Dean, etc) have also different inputs. So I make different forms for each particular usertypes. But then it throws an error ' Undefined index: usertype ' and I know that is because it's not part of the form.
So can you give me some advice on how will I be able to come up with this properly? Thank you.
Here is my html code:
<select id="usertype" name="usertype" class="dropdown-select" onfocus="getPrevious()" onchange="set()" >
<option value="1" selected="selected">Chairperson</option>
<option value="2">Dean</option>
<option value="3">Faculty</option>
<option value="4">Staff</option>
<option value="6">Admin</option>
</select>
<form action="" name="form1" method="post">
<div id="formpage_Chairperson" style="visibility: visible; display: block;">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="text" value="" name="D" />
<input type="text" value="" name="E" />
<input type="text" value="" name="F" />
<input type="Submit" value="Submit Form" name="submitForm" />
</div>
</form>
<form action="" name="form1" method="post">
<div id="formpage_Dean" style="visibility: hidden; display: none;">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="Submit" value="Submit Form" name="submitForm" />
</div>
</form>
This is the Javascript for handling the onchange event of the combo box:
var prev = ""
function pagechange(topage) {
var page;
if (prev.length > 0) {
page = document.getElementById('formpage_' + prev);
if (page)
page.style.visibility='hidden';
page.style.display = 'none';
}
page = document.getElementById('formpage_' + topage);
if (!page)
return false;
page.style.visibility='visible';
page.style.display = 'block';
prev = topage;
return true;
}
function set(){
var e = document.getElementById("usertype");
var selection = e.options[e.selectedIndex].text;
pagechange(selection);
}
Not sure how you wanted to "access" it. I'm assuming you mean with the rest of the form data, so you could do something like the following:
function pagechange(topage) {
var page;
if (prev.length > 0) {
page = document.getElementById('formpage_' + prev);
if (page) {
page.style.visibility='hidden';
page.style.display = 'none';
}
page = document.getElementById('formpage_' + topage);
// create hidden input field and append to form
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", "page");
input.setAttribute("value", topage);
page.appendChild(input);
// end of changes
if (!page)
return false;
page.style.visibility='visible';
page.style.display = 'block';
prev = topage;
}
return true;
}
Also, you were missing a closing bracket on your if (prev.length > 0), so I closed it right before the return true;. You may need to adjust depending on your logic.
Hope this gets you close.