js04 HTML w pattern

by Professor Tom DeDonno

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form>
<fieldset>
<legend>Acres Month type="number" </legend>
<!-- text in number field doesn't raise change
     some browsers will actually block letters-->
<input id="acres2" type="number" min="1" />
<br />
 <input id="months2" type="number"
min="1" max="12" />
</fieldset>
<fieldset>
<legend>Acres Months Type="text"</legend>
Acres: <input id="acres" type="text" pattern="^\d+$" />
Months: <input id="months" type="text" 
        pattern="^(1[012]|[1-9])$" />
</fieldset>

<fieldset id="fuel">
<legend>preferred fuel source?</legend>
E85:  <input type="radio" name="fuel" id="E85" value="E85" />
Biodiesel: <input type="radio" 
           name="fuel" id="biodiesel"  value="biodiesel" />
Diesel: <input type="radio" name="fuel" id="diesel" value="diesel" checked />
</fieldset>
</form>

<h4 id="messageHead"></h4>
<p id="message"></p>

JavaScript

/**
 * focus element has gotten focus,
 * blur element has lost keyboard focus,
 * change input element has changed
 * its always best to use an existing exception/error name
 * but I could not find a good match
 *         https://www.w3schools.com/js/js_errors.asp
 */
$("fieldset input").change( function() {
 console.log("In change: " + this.id );
 testFormCompleteness( this );
 //if you don't want this pointer just use
 //.change( testFormCompleteness );
 } );

function testFormCompleteness( e ) {

  
  try {
    //we are passing acres, ant months to create recommendation
    let a = $( "input#acres2" ).val();
		let m = $( "input#months2" ).val(); 
    /* drop acres2, and month2 in js04 */
    if( ! /^\d+$/.test( a ) )
			throw "Acres2 type number needs positive integer: " + a;
  	  
		if( ! /^(1[012]|[1-9])$/.test( m ) )
    	throw "Months2 type number needs 1..12 only: " + m;
      
    a = $( "input#acres" ).val();
    if( ! /^\d+$/.test( a ) ) 
    	throw "needs to be a positive number: " 
      + a;
    
    m = $("input#months").val();
    /*multiple throws give you more meaniful error
          but one long if probably cleaner code? 
     ! /^(1[012]|[1-9])$/.test( m ) */
    if (!m || isNaN(m)) throw "number of months needs to be 1..12";
    if (m < 1) throw "months too Low " + m + "  Need at least 1";
    if (m > 12) throw "months too high " + m + " limit 12months/year";

    createRecommendation( a, m );
  } catch (err) {
    $("#messageHead").text("Error").css({ color: "red" });
    $("#message").text(err);
  }
} //end testFormCompleteness

function createRecommendation( a, m ) {
  $( "#messageHead" ).text( "Data Okay" ).css( "color", "black" );
  $( "#message" ).text( "acres: " + a + " month: " + m );
}