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 = "[email protected]";
var emailCC = "[email protected]";
var emailBCC = "[email protected]";
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> </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> </td>
<td>Agreement nr:</td>
<td><input type="text" name="agree_1" placeholder="Agreement Info" id="agree_2" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </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()" />
<input type="submit" value="Generate email" onclick="generateEmail()" />
</form>
</div>3
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 andlabel. Also it’s<br />, not</br> - Use
addEventListener()in JS to bind event handlers, notonclickattributes in JS. - Bind to the
submitevent 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
tableelements 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 = "[email protected]";
const emailCC = "[email protected]";
const emailBCC = "[email protected]";
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 & 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> </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> </td>
<td>Agreement nr:</td>
<td><input type="text" name="agree_1" placeholder="Agreement Info" id="agree_2" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </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>6