I have an html file. It contains a JavaScript function and a form. The form consists of a datepicker from materializecss.com and some text input fields. Whenever the user fills in the form with some data, these data are collected by the JavaScript function and sent to my Google Spreadsheet. Everything is working fine. But now I want to add following modifications to the JavaScript code:

1. Data validation 1: Check, if the user has filled in all input fields.
2. Data validation 2: If all fields haven´t been filled in, then display the short message warning “All fields are required” in color red at the bottom of the form.
3. Data validation 3: Give the user the possibility to write the word “Vormittag” or “Nachmittag” in the last field (field id="platzhalter") the way the user wants (so, with or without a capital letter at the beginning of each word).

Thank you so much in advance for your help.

And here is the JavaScript code that I am trying to modify:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>  
  <script>
  // Localize the materializecss.com calender, so that all months and days are displayed in German
        inter_de = {
        cancel: 'ABBRECHEN',
        done:    'BESTÄTIGEN',
        previousMonth:    '‹',
        nextMonth:    '›',
        months:         ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
        monthsShort:    ['Jan','Feb','März','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'],
        weekdays:       ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
        weekdaysShort:  ['So','Mo','Di','Mi','Do','Fr','Sa'],

        weekdaysAbbrev:    ['S', 'M', 'D', 'M', 'D', 'F', 'S']
      };
// Initialize the materializecss.com calender
const Calender = document.querySelector('.datepicker');
M.Datepicker.init(Calender,{
    format:'dd.mm.yyyy',
    i18n:inter_de
});
    </script>

    <script>
  // Localize the materializecss.com form input fields, so that the detault content of each field is in German   collect the input of the user
    var unternehmeneBox=document.getElementById("unternehmen");
    var anredeBox=document.getElementById("anrede");
    var nachnameBox=document.getElementById("nachname");
    var rufnummerBox=document.getElementById("rufnummer");
    var emailadresseBox=document.getElementById("emailadresse");
    var datepickerBox=document.getElementById("datepicker");
    var platzhalterBox=document.getElementById("platzhalter");
    document.getElementById("btn").addEventListener("click",addRecord);
    function addRecord(){
      var data={
      unternehmen:unternehmeneBox.value,
      anrede:anredeBox.value,
      nachname:nachnameBox.value,
      rufnummer:rufnummerBox.value,
      emailadresse:emailadresseBox.value,
      datepicker:datepickerBox.value,
      platzhalter:platzhalterBox.value
    };
  
  // show the form again, after the user input/data have been sent.
  google.script.run.appenData(data);
  unternehmeneBox.value="";
  anredeBox.value="";
  nachnameBox.value="";
  rufnummerBox.value="";
  emailadresseBox.value="";
  datepickerBox.value="";
  platzhalterBox.value="";
  }
    </script>

CodePudding user response：

To check if something everything has a value, check it .value, or if you require a minimum length then just add .value.length > minLength

if( unternehmeneBox.value && anredeBox.value && etc… ){
 return true
}

To display the message to the user, when not all fields are required, just add a field with a id messageToUser wherever you want in your html, and then do:

const errorMsg = “All fields are required”
const msgColor = "red"
const msgToUser = document.getElementById("messageToUser")
msgToUser.value = errorMsg
msgToUser.style.color = msgColor

To check a particular field for a value, probably best to add options or a picklist, otherwise, if they have to type it, then try:

if( platzhalterBox.value.toLowerCase() == "nachmittag"
  || platzhalterBox.value.toLowerCase() == "vormittag"){

  // Correct, the value is one of the two valid options
}