I am making a picture framing calculator. I'm running into a problem making the input fields required. The required attribute would only do something if I were using a native form submission, essentially letting the <form> element drive the form submission. Instead I've opted to use this :
#height {
text-align: left;
margin-top: 250px;
margin-left: 4px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name "viewport" content="width=device-width,
initial-scale=1.0">
<title>I Was Framed - Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<sides>
<section>
<form id="frm1" action="/index.html" method="post">
<fieldset>
<legend>
I Was Framed Calculator
</legend>
<label for="frameWidth">Frame Width:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="wf" id="wf">
<select name="wff" id="wff">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="frameHeight">Frame Height:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="hf" id="hf">
<select name="hff" id="hff">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="pictureWidth">Picture Width:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="wp"
id="wp">
<select name="wpf" id="wpf">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="pictureHeight">Picture Height:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="hp"
id="hp">
<select name="hpf" id="hpf">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select><br>
<label for="matOverlap">Mat Overlap:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="o" id="o">
<select name="of" id="of">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<br>
<br>
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc" />
</fieldset>
</form>
</section>
<script src="https://unpkg.com/[email protected]/index.js"></script>
<script>
function calc()
{
var wf = eval(document.getElementById('wf').value)
var wff = eval(document.getElementById('wff').value)
var hf = eval(document.getElementById('hf').value)
var hff = eval(document.getElementById('hff').value)
var wp = eval(document.getElementById('wp').value)
var wpf = eval(document.getElementById('wpf').value)
var hp = eval(document.getElementById('hp').value)
var hpf = eval(document.getElementById('hpf').value)
var o = eval(document.getElementById('o').value)
var of = eval(document.getElementById('of').value)
if (!wf || !hf || !wp || !hp || !o) {
alert('All fields are required!')
return
}
var width = (1 / 2) * ((hf hff) - (hp hpf) (o of ));
var height = (1 / 2) * ((wf wff) - (wp wpf) (o of ));
document.getElementById('width').innerHTML = new Fraction(width).toString();
document.getElementById('height').innerHTML = new Fraction(height).toString();
document.getElementById('rectangle').scrollIntoView({
behavior: 'smooth'
})
}
</script>
</sides>
<sides>
<center>
<div style="width:400px;height:50px;;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
<center>
<div id="width"></div>
</center>
<div id="height"></div>
</div>
</center>
</sides>
</body>
</html>As you can see in the above code snippet, When you leave the fields blank, it throws the error message as you should. However, when the user types in a 0 into the field, then it produces the same error which it should not.
The code in question is :
if (!wf || !hf || !wp || !hp || !o) {
alert('All fields are required!')
return
}
My required fields only consist of the input fields & do not apply to the select dropdown menus.
Can someone provide some guidance on how to require that only blank fields are receiving my error message when the above code is in use ?
CodePudding user response：
You can use validation even when not using native form submission by using the Constraint Validation API to query the validation state.
Don't use eval to convert strings into numbers, especially not user input. Use parseInt, parseFloat or the unitary operator .
Additionally <input type="number"> elements have the property valueAsNumber that you can use instead of value. All these will return NaN which can checked with isNaN() if the value isn't a number, or can't be converted to one.
CodePudding user response：
Just change your logic
From :
if (!wf || !hf || !wp || !hp || !o) {
alert('All fields are required!')
return
}
To :
if (!(wf || hf || wp || hp || o)) {
alert('All fields are required!')
return
}
#height {
text-align: left;
margin-top: 250px;
margin-left: 4px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name "viewport" content="width=device-width,
initial-scale=1.0">
<title>I Was Framed - Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<sides>
<section>
<form id="frm1" action="/index.html" method="post">
<fieldset>
<legend>
I Was Framed Calculator
</legend>
<label for="frameWidth">Frame Width:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="wf" id="wf">
<select name="wff" id="wff">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="frameHeight">Frame Height:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="hf" id="hf">
<select name="hff" id="hff">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="pictureWidth">Picture Width:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="wp"
id="wp">
<select name="wpf" id="wpf">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="pictureHeight">Picture Height:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="hp"
id="hp">
<select name="hpf" id="hpf">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select><br>
<label for="matOverlap">Mat Overlap:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="o" id="o">
<select name="of" id="of">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<br>
<br>
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc" />
</fieldset>
</form>
</section>
<script src="https://unpkg.com/[email protected]/index.js"></script>
<script>
function calc()
{
var wf = eval(document.getElementById('wf').value)
var wff = eval(document.getElementById('wff').value)
var hf = eval(document.getElementById('hf').value)
var hff = eval(document.getElementById('hff').value)
var wp = eval(document.getElementById('wp').value)
var wpf = eval(document.getElementById('wpf').value)
var hp = eval(document.getElementById('hp').value)
var hpf = eval(document.getElementById('hpf').value)
var o = eval(document.getElementById('o').value)
var of = eval(document.getElementById('of').value)
if (!(wf || hf || wp || hp || o)) {
alert('All fields are required!')
return
}
var width = (1 / 2) * ((hf hff) - (hp hpf) (o of ));
var height = (1 / 2) * ((wf wff) - (wp wpf) (o of ));
document.getElementById('width').innerHTML = new Fraction(width).toString();
document.getElementById('height').innerHTML = new Fraction(height).toString();
document.getElementById('rectangle').scrollIntoView({
behavior: 'smooth'
})
}
</script>
</sides>
<sides>
<center>
<div style="width:400px;height:50px;;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
<center>
<div id="width"></div>
</center>
<div id="height"></div>
</div>
</center>
</sides>
</body>
</html>