Question

Some required attributes are not validated while using form and javascript

I'm using a form for issues with mandatory fields but some aren't taken into account.

Of the 6 required input blocks only 4 are correctly validated when you try to submit the form. The 'IVR status' and the 'Description' blocks are not validated.

I'm drawing a blank what I have missed in the code that exclude these blocks from being validated.

function generateEmail(event) {
  event.preventDefault();
  var emailTo      = "a@b.c";
  var emailCC      = "d@b.c";
  var emailBCC     = "e@b.c";
  var emailSubject = "WEBFORM: " + $("#subject").val();
  var emailBody    = "Reporter: " + $("#reporter").val() + "%0A%0AThe issue occured on: " + $("#issueDT").val() +
    "%0A%0ACustomer Account Data: " + "%0A   Account: " + $("#accnt_1").val() + "%0A%0ACustomer Account Data: " + "%0A   Account: " + $("#accnt_2").val() + "%0A   Agreement: " + $("#agree_1").val() + "%0A   Agreement: " + $("#agree_2").val() + "%0A   Agreement: " + $("#agree_3").val() + "%0A%0AIVR Status: " + $("#ivrState").val() + "%0A%0ADescription: " + $("#descript").val()
  location.href = "mailto:" + emailTo + "?"
                + ( emailCC      ? "cc="       + emailCC : "") 
                + ( emailBCC     ? "&bcc="     + emailBCC : "") 
                + ( emailSubject ? "&subject=" + emailSubject : "") 
                + ( emailBody    ? "&body="    + emailBody : "");
}

function reloadPage() {
  location.reload();
}
.container {
  width: 800px;
  border: 2px solid black;
  padding: 15px;
}

.control {
  color: blue;
}

h1 {
  color: green;
}

h2 {
  color: red;
}
<div class="container">
  <h1>Report your issue</h1>
  </br>
  </br>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <form method="post" class="info" onsubmit="generateEmail(event)">
    Email Subject: </br><input name="subject" placeholder="Subject 20 characters min" id="subject" type="text" size="100" minlength="20" required /></br>
    Reporter Name: </br><input name="reporter" placeholder="Reporter name" id="reporter" type="text" size="100" maxlength="75" required /></br>
    Date & time the issue occured: </br><input name="issueDT" id="issueDT" type="datetime-local" required /></br>
    <label for="ivrState">IVR Status"</label>
    <select name="ivrState" id="ivrStatus" required>
      <option disabled="disabled" selected="selected">Select</option>
      <option value="fail">Failed</option>
      <option value="pass">Passed</option>
    </select>
    </br>
    </br>
    <table>
      <tr>
        <td colspan="5">Customer Account Details:</td>
      </tr>
      <tr>
        <td>Account Nr:</td>
        <td><input type="text" name="accnt_1" placeholder="Account Info" id="accnt_1" required /></td>
        <td>&nbsp;</td>
        <td>Agreement nr:</td>
        <td><input type="text" name="agree_1" placeholder="Agreement Info" id="agree_1" /></td>
      </tr>
      <tr>
        <td>Account Nr:</td>
        <td><input type="text" name="accnt_2" placeholder="Account Info" id="accnt_2" /></td>
        <td>&nbsp;</td>
        <td>Agreement nr:</td>
        <td><input type="text" name="agree_1" placeholder="Agreement Info" id="agree_2" /></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>Agreement nr:</td>
        <td><input type="text" name="agree_3" placeholder="Agreement Info" id="agree_3" /></td>
      </tr>
    </table>
    </br>
    Give a description: </br> <textarea rows="7" cols="100" minlength="50" id="descript" name="Description" required>Provide a description of min 50 characters.</textarea></br>
    <input type="reset" value="Reset" onclick="reloadPage()" /> &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit" value="Generate email" onclick="generateEmail()" />
  </form>
</div>

 2  85  2
1 Jan 1970

Solution

 4

The select is being marked as valid because the default option has no value attribute. Therefore its value comes from the text contained within the selected option, which is 'Select'. Therefore it's considered to have a value and is valid.

To fix this, add value="" to the default option:

<select name="ivrState" id="ivrStatus" required>
  <option value="" disabled="disabled" selected="selected">Select</option>
  <option value="fail">Failed</option>
  <option value="pass">Passed</option>
</select>

For the textarea, the minlength attribute is only evaluated when the element has been interacted with by the user (more info on that here). Therefore given the initial state of your page the only validation it has to pass is required, which it does due to your default text. To fix this, move the character limit guidance text to the field's label.

Your code can also be improved by:

  • Avoiding using <br /> elements and &nbsp; for spacing. Use CSS to align things properly, as well as using grouping elements such as label. Also it's <br />, not </br>
  • Use addEventListener() in JS to bind event handlers, not onclick attributes in JS.
  • Bind to the submit event of the form, not the click of the submit button, to handle the email generation.
  • Use string interpolation to build complex strings where you have to. String concatenation gets ugly, quickly.
  • Don't use table elements for layout. I'll leave this as an exercise for you to fix
  • If you need to use jQuery, reference it in the <head> of your page, or just before </body>. Do not put it at the start of the <body>

Here's working example with all those adjustments applied.

const form = document.querySelector('form.info');

form.addEventListener('submit', e => {
  e.preventDefault();
  const emailTo = "a@b.c";
  const emailCC = "d@b.c";
  const emailBCC = "e@b.c";
  const emailSubject = `WEBFORM: ${$("#subject").val()}`;
  const emailBody = `
    Reporter: ${$("#reporter").val()}%0A%0A
    The issue occured on: ${$("#issueDT").val()}%0A%0A
    Customer Account Data: %0A   
    Account: ${$("#accnt_1").val()}%0A%0A
    Customer Account Data: %0A   
    Account: ${$("#accnt_2").val()}%0A   
    Agreement: ${$("#agree_1").val()}%0A
    Agreement: ${$("#agree_2").val()}%0A   
    Agreement: ${$("#agree_3").val()}%0A%0A
    IVR Status: ${$("#ivrState").val()}%0A%0A
    Description: ${$("#descript").val()}`
  location.href = "mailto:" + emailTo + "?" +
    (emailCC ? "cc=" + emailCC : "") +
    (emailBCC ? "&bcc=" + emailBCC : "") +
    (emailSubject ? "&subject=" + emailSubject : "") +
    (emailBody ? "&body=" + emailBody : "");
});

const resetButton = document.querySelector('#resetButton');
resetButton.addEventListener('click', () => {
  window.location.reload();
});
h1 {
  color: green;
  margin-bottom: 40px;
}

h2 {
  color: red;
}

label {
  display: block;
  margin-bottom: 10px;
}

label span {
  margin-bottom: 2px;
}

label span,
label input {
  display: block;
}

table {
  margin-bottom: 20px;
}

.container {
  width: 800px;
  border: 2px solid black;
  padding: 15px;
}

.control {
  color: blue;
}
<div class="container">
  <h1>Report your issue</h1>
  <form method="post" class="info">
    <label>
      <span>Email Subject:</span>
      <input name="subject" placeholder="Subject 20 characters min" id="subject" type="text" size="100" minlength="20" required />
    </label>
    <label>
      <span>Reporter Name:</span>
      <input name="reporter" placeholder="Reporter name" id="reporter" type="text" size="100" maxlength="75" required />
    </label>
    <label>
      <span>Date &amp; time the issue occured:</span>
      <input name="issueDT" id="issueDT" type="datetime-local" required />
    </label>
    <label>
      <span>IVR Status</span>
      <select name="ivrState" id="ivrStatus" required>
        <option disabled="disabled" selected="selected" value="">Select</option>
        <option value="fail">Failed</option>
        <option value="pass">Passed</option>
      </select>    
    </label>

    <table>
      <tr>
        <td colspan="5">Customer Account Details:</td>
      </tr>
      <tr>
        <td>Account Nr:</td>
        <td><input type="text" name="accnt_1" placeholder="Account Info" id="accnt_1" required /></td>
        <td>&nbsp;</td>
        <td>Agreement nr:</td>
        <td><input type="text" name="agree_1" placeholder="Agreement Info" id="agree_1" /></td>
      </tr>
      <tr>
        <td>Account Nr:</td>
        <td><input type="text" name="accnt_2" placeholder="Account Info" id="accnt_2" /></td>
        <td>&nbsp;</td>
        <td>Agreement nr:</td>
        <td><input type="text" name="agree_1" placeholder="Agreement Info" id="agree_2" /></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>Agreement nr:</td>
        <td><input type="text" name="agree_3" placeholder="Agreement Info" id="agree_3" /></td>
      </tr>
    </table>

    <label>
      <span>Give a description (min 50 chars): </span>
      <textarea rows="7" cols="100" minlength="50" id="descript" name="Description" required></textarea>
    </label>

    <button type="button" id="resetButton">Reset</button>
    <button type="submit">Generate email</button>
  </form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2024-07-17
Rory McCrossan