It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I'm trying to verify a user's input on a web login form using JavaScript, but something drives me nuts and I don't know whats wrong. Restrictions: Ref. number must be numeric, and postcode can contain only numbers and letters. So I'm checking this and the length of input fields through out a couple of functions. In addition the HTML form and JavaScript file. EDIT: All validation methods falls, even if i dont enter a value into the fields it redirect me to the succesful login page.
<html>
<form method"POST" id="loginform" action="thank-you.html">
<table>
<tr>
<td> Post Code : <input id="postcode" type="text" required="required" /></td>
<td> Ref. Number :<input id="passw" type="password" required="required" /></td>
<td> <input type="submit" class="submit"value="Submit" </td>
</tr>
</table>
</form>
</html
And the javascrit code:
function formValidation() {
document.getElementById("loginform").onsubmit = function () {
var uid = document.loginform.postcode;
var passid = document.loginform.passw;
if (postcode_validation(uid, 5, 7)) {
if (passid_validation(passid, 4, 6)) {
if (alphanumeric(uid)) {
if (allnumeric(passid)) {}
}
}
}
}
return false;
}
function userid_validation(uid, mx, my) {
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= my || uid_len < mx) {
alert("Postcode should not be empty / length be between " + mx + " to " + my);
uid.focus();
return false;
}
return true;
}
function passid_validation(passid, mx, my) {
var passid_len = passid.value.length;
if (passid_len == 0 || passid_len >= my || passid_len < mx) {
alert("Password should not be empty / length be between " + mx + " to " + my);
passid.focus();
return false;
}
return true;
}
function alphanumeric(uid) {
var letters = /^[0-9a-zA-Z]+$/;
if (uid.value.match(letters)) {
return true;
} else {
alert('postcode must have alphanumeric characters only');
uid.focus();
return false;
}
}
function allnumeric(passid) {
var numbers = /^[0-9]+$/;
if (passid.value.match(numbers)) {
return true;
} else {
alert('REf number must have numeric characters only');
passid.focus();
return false;
}
}
window.onload = function () {
formValidation();
}
The submit tag isn't closed. Look at the code highlighting Stackoverflow puts there, it's missing on the submit tag.
<td> <input type="submit" class="submit"value="Submit" </td>
should be:
<td> <input type="submit" class="submit" value="Submit" /></td>
I think you may try to add a final return statement in the innermost if-block.
function formValidation() {
document.getElementById("loginform").onsubmit = function () {
var uid = document.loginform.postcode;
var passid = document.loginform.passw;
if (postcode_validation(uid, 5, 7)) {
if (passid_validation(passid, 4, 6)) {
if (alphanumeric(uid)) {
if (allnumeric(passid)) {
return true;
}
}
}
}
}
return false;
}
I know this seems too simple, but it's obviously missing in your code.
Without the return statement Javascript defaults to undefined, what will prefend your form from submitting.
Change your code to the following:
<html>
<form method"POST" onSubmit="return formValidation(this)" id="loginform" action="thank-you.html">
<table>
<tr>
<td> Post Code : <input name="postcode" id="postcode" type="text" required="required" /></td>
<td> Ref. Number :<input name="passw" id="passw" type="password" required="required" /></td>
<td> <input type="submit" class="submit"value="submit"> </td>
</tr>
</table>
</form>
</html>
And:
function formValidation(theForm) {
if (postcode_validation(theForm.postcode, 5, 7)) {
if (passid_validation(theForm.passwd, 4, 6)) {
if (alphanumeric(this.postcode)) {
if (allnumeric(theForm.passwd)) {
return true;
}
}
}
}
return false;
}
This way you don't have to fetch elements by ID, because you have everything you need inside the added parameter theForm. If you don't use the IDs for layout just remove them entirely.
Related
I would like to query an input field with Javascript and from a value of over 20 a button should be released. Javascript works too. Unfortunately, if I enter the number with a comma instead of a period, it no longer works.
var checkEmpty_ek = document.querySelector('#ek');
checkEmpty_ek.addEventListener('input', function() {
if (checkEmpty_ek.value >= 20) {
document.getElementById("neuerbuttonspeichern").disabled = false;
} else {
document.getElementById("neuerbuttonspeichern").disabled = true;
}
});
<input type="text" id="ek" name="ek" value="$ek">
<input type="button" id="neuerbuttonspeichern" value="Send" />
Try: let inputValue = Number(checkEmpty_ek.value.replace(",",".")); inside function.
And then check: (inputValue >= 20)
It is not the most elegant solution, but it will resolve if the user types the number with a comma or with letters and special characters.
Bye.
Use type = number
var checkEmpty_ek = document.querySelector('#ek');
checkEmpty_ek.addEventListener('input', function() {
document.getElementById("neuerbuttonspeichern").disabled = checkEmpty_ek.value < 20;
});
$ek<input type="number" id="ek" name="ek" value="0">
<input type="button" id="neuerbuttonspeichern" value="Send" disabled />
if (Number(checkEmpty_ek.value.replace(/,/g, '')) >= 20) {
{
document.getElementById("neuerbuttonspeichern").disabled = false;
} else
{
document.getElementById("neuerbuttonspeichern").disabled = true;
});
If you are just looking to remove any potential commas from the input, this will do it. But like someone else commented, we aren't really familiar with your user interaction expectations. Chances are, you'll be filtering out more than commas.
Just replace the comma with the dot.
Number(checkEmpty_ek.value.replace(",","."))
Number ("20.") === 20
var checkEmpty_ek = document.querySelector('#ek');
checkEmpty_ek.addEventListener('input', function() {
console.log(checkEmpty_ek.value)
if (Number(checkEmpty_ek.value.replace(",",".")) >= 20) {
document.getElementById("neuerbuttonspeichern").disabled = false;
} else {
document.getElementById("neuerbuttonspeichern").disabled = true;
}
});
<input type="text" id="ek" name="ek" value="">
<input type="button" id="neuerbuttonspeichern" value="Send" />
This question already has answers here:
Concise way to compare against multiple values [duplicate]
(8 answers)
Closed 3 years ago.
i need a help for javascript.
For example i have an x value and i want to two or multiple values equal to x in if statement.
if x equals to apple or pear or banana it writes "fruits". How can i do this?
I've tried || and && operators. I tried to put "," and ";" between the values.
<form name="formname" action="send.php" method="post" onsubmit="return confirm();">
Type your name : <input type="text" name="name"><br>
<input type="submit" value="Send">
</form>
<script>
function confirm() {
var x = document.formname.name.value;
if (x == "") {
alert("You need to fill here!");
return false;
}
else if (x == "Lisa" /* and a little more names... */) {
alert("You can't enter here");
return false;
}
else {
alert("Welcome");
return false;
}
}
</script>
When I put "," between values in "else if" statement and when I type else name from "else if" statement, it writes "You can't enter here" again. But i except it will write "Welcome".
function confirm() {
var x = document.formname.name.value;
if (x == "") {
alert("You need to fill here!");
return false;
} else if (x == "Lisa" || x == "value2" || x == "value3") {
alert("You can't enter here");
return false;
} else {
alert("Welcome");
return false;
}
}
<form name="formname" action="send.php" method="post" onsubmit="return confirm();">
Type your name : <input type="text" name="name"><br>
<input type="submit" value="Send">
</form>
When I invoke the function it is getting invoked but it flashes the result. Could please tell me what is the mistake I did?
Below is the HTML Code I used:
I have replaced the input type as a button but still, error not fixed.
function reg() {
//Name Field
var f = document.forms["registration"]["fullname"].value;
if (f == "") {
alert("Enter the name");
return false;
} else if (!f.match(/^.[a-zA-Z]+$/))
{
alert("Enter only alphabets");
return false;
}
document.getElementById('details').innerHTML = "Hi" + registration.fullname.value;
}
<form name="registration" onsubmit="return reg()">
<input type="text" name="fullname" placeholder="Enter Your Full Name"><br><br>
<input type="submit" value="submit">
</form>
Here is what I believe you want to do.
Note it is better to add an event handler in the script rather than having an inline handler, but for now I pass the form itself in the function
function reg(form) {
//Name Field
var f = form.fullname.value;
if (f == "") {
alert("Enter the name");
return false;
}
// no need for else when you return
if (!f.match(/^[\. a-zA-Z]+$/)) { // I personally have a space in my full name
alert("Enter only alphabets and space");
return false;
}
document.getElementById('details').innerHTML = "Hi " + f;
// change to true if you want to submit the form but you will then not be able to see the HI
return false;
}
<form name="registration" onsubmit="return reg(this)">
<input type="text" name="fullname" placeholder="Enter Your Full Name"><br><br>
<input type="submit" value="submit">
</form>
<span id="details"></span>
Can anyone please help me fix my javascript condition.
The scenario is this.
When I input 9 digit, label should turn red. But if the field is empty and i input 10 digit, label should turn blue. Im having a hard time to fix this.
function validateField(testField)
{
var reg2 = /^([\d])/;
if(testField.value.length > 0)
{
if(reg2.test(testField) == false)
{
document.getElementById("testlabel").style.color="red"
return false;
}
else
{
document.getElementById("testlabel").style.color="black"
return true;
}
}
else
{
document.getElementById("testlabel").style.color="blue";
return true;
}
}
<label id="testlabel">Test101: </label>
<input name="txtNum" type="text" id="Num" pattern=".{10,}" minlength="10" maxlength="10" onblur="validateField(this);" >
There are multiple issues with your code
Regex - If you need to validate the Regex for having 10 digits only then you can use the Regex \d{10}. Your Regex ^([\d]) only matches a digit at the start of the string.
reg2.test(testField) should be changed to reg2.test(testField.value), you are trying to compare the TextBox value and not the textbox itself.
function validateField(testField)
{
var reg2 = /\d{10}/;
if(testField.value.length > 0)
{
if(reg2.test(testField.value) == false)
{
document.getElementById("testlabel").style.color="red"
return false;
}
else
{
document.getElementById("testlabel").style.color="blue"
return true;
}
}
else
{
document.getElementById("testlabel").style.color="black";
return true;
}
}
<label id="testlabel">Test101: </label>
<input name="txtNum" type="text" id="Num" pattern=".{10,}" minlength="10" maxlength="10" onblur="validateField(this);" >
Hello everyone i am working on a project similar to a shopping cart.I am using the below code to generate textboxes(for selecting the quantity) in my view:
#foreach (var item in Model)
{
<tr>
<td align="left" class="Text_nocolor">
#Html.DisplayFor(modelItem=>item.ProductName)
/td>
<td align="right" class="Text_nocolor" valign="top">
#using (Html.BeginForm("Update", "Cart", new { UserID = Request.QueryString["UserID"] }, FormMethod.Post, new { id = "myForm" }))
{
<input id="Quantity" type="text" class="Text_nocolor" name="Quantity" value="#item.Quantity" #*onblur="return NumberOnlyTextBox(event)"*# onchange="return allownumbers()" maxlength="3"/>
#Html.Hidden("unitrate", item.Rate)
<input type="submit" value="Edit" class="Text_nocolor" onkeypress="return validateNumbersOnly(e);" onclick="return RegainFocus();" />
}
In the above code "id=Quantity" represents the textboxes.
and i have written a javascript for numbers only validation for these textboxes.
These are my javascript functions:
<script type="text/javascript">
function RegainFocus() {
if ((document.getElementById("Quantity").value).length == 0) {
document.getElementById("Quantity").focus();
alert("Quantity cannot be empty");
document.getElementById("Quantity").value = document.getElementById("Quantity").defaultValue;
return false;
}
else if ((document.getElementById("Quantity").value) > 100) {
alert("There is no enough inventory for this product to fulfill your order");
document.getElementById("Quantity").value = document.getElementById("Quantity").defaultValue;
return false;
}
}
</script>
<script type="text/javascript">
function allownumbers() {
// var elements = document.getElementsByName('Quantity');
// for()
var val = parseInt(document.getElementsByName("Quantity").item(1).value);
alert(val);
if (!val || val < 1) {
alert('Please enter a valid value');
document.getElementById("Quantity").value = document.getElementById("Quantity").defaultValue;
return false;
}
document.getElementById("Quantity").value = val;
return true;
}
</script>
My problem is that the validation works only for the first textbox not the others.
Can anyone pls provide a solution? Thank you
Try it using the following code snippet:
onkeypress="return validateNumbersOnly(this);" onclick="return RegainFocus(this);"
...
function RegainFocus(obj)
{
if ((document.getElementById(obj).value).length == 0) {
..
}
..
Hope it helps.