Forcing length of txt box or variable

Question

I have some javascript code. I want to put in some error checking but don't know where to start. I want, if the contents of val1 is not exactly 21 characters in length, to stop the script, or better still give a message box to the fact. Or maybe it is possible to force the input box to containing 21 characters? Sorry if its a silly question but I am new to this and still learning.

I set the size of the input box to 21 but this only increase the dimension so its still possible to enter more or less characters than this. I thought maybe some sort of if statement might do it but dont know how to do this and my attempts have been unsuccessful.

<script type='text/javascript'>
function screenshot(){
  html2canvas(document.body).then(function(canvas) {

    // Get base64URL
    var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
    var val1 = $('#datepicker').val();

    // AJAX request
    $.ajax({
       url: 'ajaxfile.php',
       type: 'post',
       //data: {image: base64URL, name: datepicker},
       data: {image: base64URL, datepicker: val1},
       success: function(data){
       console.log('Upload successfully');
       }
    });
  });
}
</script>

No matter what I tried it stopped the script working altogether, even when val1 was 21 characters.

This is what I tried after being given some additional code (thanks). But unfortunately it does not work for me (no message and script does not save image to server).

<script type='text/javascript'>
function screenshot(){
  html2canvas(document.body).then(function(canvas) {

    // Get base64URL
    var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
    var val1 = $('#datepicker').val();
    var val1_length = val1.length;    

    if(val1_length != 21)
        {
            alert("please enter 21 character ....");
        }
    else
    {

    // AJAX request
    $.ajax({
       url: 'ajaxfile.php',
       type: 'post',
       //data: {image: base64URL, name: datepicker},
       data: {image: base64URL, datepicker: val1},
       success: function(data){
       console.log('Upload successfully');
       }
    });
  });
}
}
</script>

I have resolved this. In the end I decided to use a function inside JavaScript, outside of the ajax code. It is a much more elegant solution, imo, and will ensure the users will know what data needs to be entered (and to use the date picker calendar).

function ValidateDate()
{
var datepicker = document.getElementById('datepicker');
var datepicker = document.getElementById('datepicker').value;
var FullDate = 21;   

  if (datepicker.length !== FullDate) {
  {
    alert("The Date Must Have a Start *and* End Date. Use the Calendar to Ensure this. Do Not enter any other text in the Box!");
    document.getElementById("datepicker").focus();
    return false;
  }
  } else {
    screenshot();      
  }
}

Answer 1

I have resolved this. In the end I decided to use a function inside JavaScript, outside of the ajax code. It is a much more elegant solution, imo, and will ensure the users will know what data needs to be entered (and to use the date picker calendar).

function ValidateDate()
{
var datepicker = document.getElementById('datepicker').value;
var FullDate = 21;   

  if (datepicker.length !== FullDate) {
  {
    alert("The Date Must Have a Start *and* End Date. Use the Calendar to Ensure this. Do Not enter any other text in the Box!");
    document.getElementById("datepicker").focus();
    return false;
  }
  } else {
    screenshot();      
  }
}