Я изменил несколько разделов кода и запустил это в jsfiddle.
Вам не хватало jQuery
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
Я заменил ваш метод проверки с готовым документом.
Я удалил событие onclick из вашего ввода и использовал кнопку отправки вместо type = "button", так как это всего лишь from с одним действием.
this:
<input name="generate" type="button" value="Create Multiplication Table!" onclick='validate();'/>
на это:
<input name="generate" type="submit" value="Create Multiplication Table!"/>
Ниже ваш код с моими изменениями.
<head>
<title> Multiplication Table </title>
<meta charset="utf-8">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script type='text/javascript' src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type='text/javascript' src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/additional-methods.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("form[name='tabley-boy']").validate({
rules: {
mnrows : {
required: true,
number: true,
min: -50,
max: 49
},
mxrows: {
required: true,
number: true,
min: -49,
max: 50
},
mncols: {
required: true,
number: true,
min: -49,
max: 50
},
mxcols: {
required: true,
number: true,
min: -49,
max: 50
}
},
messages : {
mnrows: {
required: "Please enter a number",
number: "Please enter a number",
min: "Your number must be between -50 and 49",
max: "Your number must be between -50 and 49"
},
mxrows: {
required: "Please enter a number",
number: "Please enter a number",
min: "Your number must be between -49 and 50",
max: "Your number must be between -49 and 50"
},
mncols: {
required: "Please enter a number",
number: "Please enter a number",
min: "Your number must be between -50 and 49",
max: "Your number must be between -50 and 49"
},
mxcols: {
required: "Please enter a number",
number: "Please enter a number",
min: "Your number must be between -49 and 50",
max: "Your number must be between -49 and 50"
}
},
submitHandler: function() {
Table();
return false;
}
});
});
function Table()
{
var minrows = parseInt(document.getElementById('mnrows').value);
var maxrows = parseInt(document.getElementById('mxrows').value);
var mincols = parseInt(document.getElementById('mncols').value);
var maxcols = parseInt(document.getElementById('mxcols').value);
var output='';
var j=mincols;
var temp=0;
var i=0;
var countm=minrows;
output=output + "<table border='1' width='500' cellspacing='0'cellpadding='5'> ";
output = output + "<tr> <td> </td> ";
//this part creates the column numbers pre multiplication in the black background and styled
for(temp=mincols;temp<=maxcols;temp++)
{
output = output + "<td style='background-color:black; color:white; font-weight: bold;'> " + temp + "</td> ";
}
output = output + "</tr> ";
for(i=minrows;i<=maxrows;i++)
{
//this part creates the row numbers pre multiplication in the black background and styled
output = output + "<tr> <td style='background-color:black; color:white; font-weight: bold;'> " +countm +"</td> ";
countm++;
//this next part fills in the rows as it goes by restarting j after each while loope
while(j<=maxcols)
{
output = output + "<td> " + i*j + "</td> ";
j++;
}
output = output + "</tr> ";
j = mincols;
}
output = output + "</table> ";
document.getElementById('cooltable').innerHTML =output;
}
</script>
</head>
<body>
<h1 style="text-align:center;"> Multiplication Table Creator!</h1>
<div class="container">
<div class="row">
<div class="col-5">
<form name="tabley-boy" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2">Minimum for rows: </label> <div class="col-sm-10">
<input type="text" name="mnrows" id="mnrows"/></div><br/>
<label class="col-sm-2">Maximum for rows </label> <div class="col-sm-10">
<input type="text" name="mnrows" id="mxrows"/></div><br/>
<label class="col-sm-2">Minimum for columns </label> <div class="col-sm-10">
<input type="text" name="mncols" id="mncols"/></div><br/>
<label class="col-sm-2">Maximum for columns </label> <div class="col-sm-10">
<input type="text" name="mncols" id="mxcols"/></div><br/>
<input name="generate" type="submit" value="Create Multiplication Table!"/>
</form>
</div>
</div>
<div class="col-5" id="cooltable">
</div>
</div>
</div>
<!--
<script>
// $( document ).ready(function() {
// validate();
// });
</script>
-->
</body>
</html>```