I am trying to disable all other inputs within a specific form "<form id="join">"
if the user has not first filled out the <input type="text" id="userkey" name="userkey" /> input and all other inputs will remain disabled until the "<form id="join">" input has been filled out.
The reason for this is to model user behavior so they will join our site discord first for various reasons that I won't be going into. I understand that this is not a secure method. All user data will be sanitized and validated on the server side to protect the site/database. I understand that it is possible to bypass this and still submit data, again user data will be sanitized and validated on the server side to protect the site/database. I am doing thise because even with a huge note on the membership form to do so, they still try to submit data and bypass joining the discord making it difficult to communicate with them. this is an attempt at idiot proofing a site - also it blocks a lot of spam as spambots generally can't join a discord.
here is a very simple example from which I will extrapolate to our actual membership form.
here is the htmt
<form id="join-membership">
user key
<br />
<input type="text" id="userkey" name="userkey" />
<br />
<p>If you do not have a user key, please join our discord to get one</p>
Email
<br />
<input type="email" id="email" disabled="disabled" />
<br />
Username
<br />
<input type="text" id="username" name="username" disabled="disabled" />
<br />
Password
<br />
<input type="password" id="pass" name="password" disabled="disabled" />
<br />
Confirm Password
<br />
<input type="password" id="pass2" name="password2" disabled="disabled" />
<br />
About You
<br />
<textarea id="about" name="about" disabled="disabled"></textarea>
<br />
<input type="submit" id="submit" value="Register" disabled="disabled" />
</form>
<div id="test"></div>
here is the JavaScript
<script>
(function() {
$('form > input').keyup(function() {
var email = true;
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (email == empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
</script>
Please note that I am super new to JavaScript and the web and have researched and found script to disable the submit button, but our form is a bit complex and I don't want users to try to fill it out as to find out the can't submit it even if they failed to read the instruction. This is model user behavior to provide what I hope is a better user experience in the long term.
Thank you for any help given.
Hi you can try something like this
(function() {
$("#userkey").keyup(function() {
const userkey = this.value;
if (userkey) {
$('.other-inputs input, .other-inputs textarea').removeAttr('disabled');
} else {
$('.other-inputs input, .other-inputs textarea').attr('disabled', 'disabled');
}
});
})()
on user key input change, the function is checking if there is value in userkey input if exist It will remove disabled attribute from the inputs that are in div other-input
Check here for an example: https://jsfiddle.net/t4ub0xs3/
Related
I cannot work out what is wrong with my code, and why the form validation simply is not firing. The code is an HTML form for inserting books into a database. I removed the PHP and CSS for simplicity's sake, but I can edit it back in if necessary.
function validateNewBook() {
var isbn = document.forms['addNewBook']['isbn'].value;
var title = document.forms['addNewBook']['title'].value;
if (title == ""){
alert("Please enter the book's title.");
return false;
}
return true;
}
<form name="addNewBook" action='#' onsubmit="return validateNewBook()" method="post">
<section id="controls">
<input class="button" type="submit" name="save_new_book" value="Save Book"/>
<input class="button" type="submit" name="browse_books" value="Browse"/>
</section>
<section id="input">
<span>* required field</span>
<span class="flex-input">
<label>ISBN</label><input type="text" name="isbn" id="isbn" size=20 value="" /> <span class="errorMessage">*</span>
</span>
<span class="flex-input">
<label>Title</label><input type="text" name="title" size=50 id="title" value="" />
<span class='errorMessage'>*</span>
</span>
</section>
</form>
However, when I run this code in my fuller program, the form still enters the new book into the database, even when the Title field is empty. What is happening?
It may be the case that user have input blank space on inputbox. So are required to filter that inputbox with trim function.For example.
title.trim();
You need to do before you mention any expresion.
I'm trying to check if the textbox is empty for my form. However, whenever I try to hit submit instead of an alert box message, telling me Firstname is empty I get "Please fill out filled".
('#submit').click(function() {
if ($('#firstname').val() == '') {
alert('Firstname is empty');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="elem" autocomplete="on">
First Name:
<br>
<input type="text" name="firstname" id="firstname" required placeholder="Enter the first name" pattern="[A-Za-z\-]+" maxlength="25"><br>
<input type="submit" id="submit" value="Submit" />
</form>
Firstly I'm assuming that the missing $ is just a typo in the question, as you state that you see the validation message appear.
The reason you're seeing the 'Please fill out this field' notification is because you've used the required attribute on the field. If you want to validate the form manually then remove that attribute. You will also need to hook to the submit event of the form, not the click of the button and prevent the form submission if the validation fails, something like this:
$('#elem').submit(function(e) {
if ($('#firstname').val().trim() == '') {
e.preventDefault();
alert('Firstname is empty');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="elem" autocomplete="on">
First Name:
<br>
<input type="text" name="firstname" id="firstname" placeholder="Enter the first name" pattern="[A-Za-z\-]+" maxlength="25"><br>
<input type="submit" id="submit" value="Submit" />
</form>
Personally I'd suggest you use the required attribute as it saves all of the above needless JS code - unless you need more complex logic than just checking all required fields have been given values.
Because you have the required property set.It is giving you Please fill out field validation as the error message.It is the validation that HTML5 is performing.
For this please make one function like :
function Checktext()
{
if ($('#firstname').val() == '') {
alert('Firstname is empty');
return false;
}
else
{
return true;
}
}
now call this function on submit button click like :
<input type="submit" id="submit" value="Submit" onclick="return check();" />
I have a form which asks user to give some input values. For some initial inputs i am doing custom validation using javascript. At the end of form one field is validated using "html required attribute". But when user clicks on submit button, input box which have required attribute shows message first instead of giving chance to previous ones i.e. not following order of error display. Below i added code and image , instead of showing that name is empty it directly jumps to location input box. This just confuses the end user. Why this problem occurs and how to resolve it?
<html>
<head>
<script>
function validate(){
var name = document.forms['something']['name'].value.replace(/ /g,"");
if(name.length<6){
document.getElementById('message').innerHTML="Enter correct name";
return false;
}
}
</script>
</head>
<body>
<form name="something" action="somewhere" method="post" onsubmit="return validate()">
<div id="message"></div>
Enter Name : <input type="text" name="name" /> <br/> <br/>
Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/>
<input type="submit" name="submit" />
</form>
</body>
</html>
This is probably just the HTML5 form validation triggered because of the required attribute in the location input.
So one option is to also set the required attribute on the name. And or disable the HTML5 validation with a novalidate attribute. See here for more information: https://stackoverflow.com/a/3094185/2008111
Update
So the simpler way is to add the required attribute also on the name. Just in case someone submits the form before he/she entered anything. Cause HTML5 validation will be triggered before anything else. The other way around this is to remove the required attribute everywhere. So something like this. Now the javascript validation will be triggered as soon as the name input looses focus say onblur.
var nameElement = document.forms['something']['name'];
nameElement.onblur = function(){
var messageElement = document.getElementById('message');
var string = nameElement.value.replace(/ /g,"");
if(string.length<6){
messageElement.innerHTML="Enter correct name";
} else {
messageElement.innerHTML="";
}
};
<form name="something" action="somewhere" method="post">
<div id="message"></div>
Enter Name : <input type="text" name="name" required="required" /> <br/> <br/>
Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/>
<input type="submit" name="submit" />
</form>
Now the above works fine I guess. But imagine you might need that function on multiple places which is kind of the same except of the element to observe and the error message. Of course there can be more like where to display the message etc. This is just to give you an idea how you could set up for more scenarios using the same function:
var nameElement = document.forms['something']['name'];
nameElement.onblur = function(){
validate(nameElement, "Enter correct name");
};
function validate(element, errorMessage) {
var messageElement = document.getElementById('message');
var string = element.value.replace(/ /g,"");
if(string.length < 6){
messageElement.innerHTML= errorMessage;
} else {
messageElement.innerHTML="";
}
}
<form name="something" action="somewhere" method="post">
<div id="message"></div>
Enter Name : <input type="text" name="name" required="required" /> <br/> <br/>
Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/>
<input type="submit" name="submit" />
</form>
im trying to validate a form before its submitted to the database but something seems to be conflicting with it and its just sending anyway without any values
heres my form:
<form method="post" action="send.php" id="theform" name="theform">
<input type="text" name="firstname" id="firstname" value="First Name" onFocus="this.value=''" class="yourinfo" ><br/>
<input type="text" name="lastname" id="lastname" value="Last Name" onFocus="this.value=''" class="yourinfo"><br/>
<input type="text" name="email" id="email" value="Email Address" onFocus="this.value=''" class="yourinfo"><br/>
<span style="color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:12px;">Ally McCoist will be sacked on</span>
<div id="datepicker"></div>
<input type="hidden" name="date" id="date">
<input type="image" src="images/submit-button-small.png" name="submit" id="submit" value="submit" style="margin-top:10px; margin-left:-2px;" >
</form>
heres my validate javascript:
$(document).ready(function(){
// Place ID's of all required fields here.
required = ["firstname", "lastname", "email"];
// If using an ID other than #email or #error then replace it here
email = $("#email");
errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Please fill out this field.";
emailerror = "Please enter a valid e-mail.";
$("#theform").submit(function(e){
//Validate required fields
for (i=0;i<required.length;i++) {
var input = $('#'+required[i]);
if ((input.val() == "") || (input.val() == emptyerror)) {
input.addClass("needsfilled");
input.val(emptyerror);
errornotice.fadeIn(750);
} else {
input.removeClass("needsfilled");
}
}
// Validate the e-mail.
if (!/^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
email.addClass("needsfilled");
email.val(emailerror);
}
//if any inputs on the page have the class 'needsfilled' the form will not submit
if ($(":input").hasClass("needsfilled")) {
e.preventDefault();
} else {
errornotice.hide();
}
});
// Clears any fields in the form when the user clicks on them
$(":input").focus(function(){
if ($(this).hasClass("needsfilled") ) {
$(this).val("");
$(this).removeClass("needsfilled");
}
});
});
i also have this javascript on the page fore my jquery UI datepicker which i think might be causing the problem
<script>
$(function() {
$("#datepicker").datepicker({
altField: '#date'
});
$('#submit').click(function() {
$('#output').html($('form').serialize());
});
});
fingers crossed one of you can see something that might fix this problem
It is possible that the form was filled out by a person with JavaScript disabled or that a person or machine simply invoked an HTTP POST, with whatever values they saw fit. For this reason, it is necessary to perform validation on the server-side (i.e. in send.php), not just on the client-side (in the JavaScript file). JavaScript validation is really just a UI optimization that allows a user to be immediately told that something is wrong without requiring a round-trip communication to the server. From a user-interface perspective, JavaScript validation is important, but from a security perspective it is useless.
I have a form element that contains about 5 fields which final query is going to create by processing values those fields. So I want to send only final query, not all of those, to the server. How can I exclude those fields from being submitted (using jQuery)?
<form action="abc/def.aspx" method="get">
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="text" name="field3" />
<input type="text" name="field4" />
<input type="text" name="field5" />
<input type="hidden" name="final" />
<input type="submit" value="Send" />
</form>
Output of form submission looks like below:
abc/def.aspx?field1=val1&field2=val2&field3=val3&field4=val4&field5=val5&final=finalQuery
Remove the name attribute on the fields you do not want submitted to the server.
<form action="abc/def.aspx" method="get">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="hidden" name="final" />
<input type="submit" value="Send" />
</form>
This is the simplest way to achieve what you want, and it works on all major browsers.
W3 spec talks about only submitting form values when name is present: http://www.w3.org/TR/html401/interact/forms.html#h-17.2
Remove the element on submit.
On the onsubmit handler:
$(formElement).submit(function() {
$(this.field1).remove(); //removing field 1 from query
return true; //send
});
Disabling the form element also stops it from being entered into the query.(tested on Chrome)
$(formElement).submit(function() {
this.field1.disabled = true;
return true; //send
});
I think the best solution is to handle the submit and then send the request yourself:
$(form).submit(function() {
//do everything you need in here to get the final result
var finalResult = alotoflogic();
$.get("abc/def.aspx",final=finalResult, "callbackfunction", "responseType");
return false;
});
that should do exactly what you want.
EDIT: as Alex pointed out this solution wouldnt send you to that page, just get the results if you need to go to the new page you can do:
$(form).submit(function() {
//do everything you need in here to get the final result
var finalResult = alotoflogic();
window.location('abc/def.aspx?final='+finalResult);
return false;
});
This way the browser is redirected to that page and only the final result is send.