How to prevent submit unless calculated field has a value?

[ClayG]

I'm still trying to learn JS. I have a submission form with a few virtual fields. The most important virtual field is configured as an AutoComplete on a PEOPLE table to make it easy to find a person by their name. I need to grab and store that person's ID value so my submission form is configured with a Calculated Value for that ID field. Example:

  SELECT Person_UUID FROM People WHERE Name = '[@cbParamVirtual1]'

My problem is, how to prevent someone from submitting the form unless they have successfully found & selected a person from my virtual (autocomplete) field?

I have tried variations of the code below but none have been successful. When I preview my datapage and test it, I can still submit a record even though my calculated field didn't retrieve a value.

 

<script>
  document.addEventListener("BeforeFormSubmit", function(event) {
 //  var VirtualVal = document.querySelector('select[name="InsertRecordPerson_UUID"]').value;
//   var check_field = document.getElementsByName("InsertRecordPerson_UUID").value;

var nameID = document.querySelector("input[id*='InsertRecordPerson_UUID']").value;

    if(VirtualVal == ''){
     alert('You have not specified a person.');
     event.preventDefault();
    }
 });

</script>

 

[Tubby]

Its a calculated value right? Try this:

<script>
  document.addEventListener("BeforeFormSubmit", function(event) {
var VirtualVal = document.querySelector('select[name="InsertRecordPerson_UUID"]');
var check_field = document.getElementsByName("InsertRecordPerson_UUID").value;

var nameID = document.querySelector("input[id*='InsertRecordPerson_UUID']").value;

    if(VirtualVal.value == ''){
     alert('You have not specified a person.');
     event.preventDefault();
    }
 });

</script>

I don't know why but sometimes it only works when .value is not used in the variable declaration but in the condition itself.

[ClayG]

I appreciate your response!! I put that in place, It didn't work but I noticed Chrome showed this error in the inspect tool:

Uncaught TypeError: Cannot read properties of null (reading 'value')

 

So while trying to diagnose that, I ended up with just this code and it worked!! So thank you!!

<script>
  document.addEventListener("BeforeFormSubmit", function(event) {

var nameID = document.querySelector("input[id*='InsertRecordPerson_UUID']").value;

    if(nameID == ''){
     alert('You have not specified a person.');
     event.preventDefault();
    }
 });

</script>