Missing error handling when submitting an empty comment

[softvision-oana-arbuzov]

URL: https://staging.webcompat.com/issues/1378
Firefox Nightly Mobile 60.0a1 (2018-02-18), Firefox Nightly Desktop 60.0a1 (2018-02-16), Chrome Desktop 64.0.3282.167, Chrome Mobile 64.0.3282.137
Operating System: Windows 10 Pro, Google Pixel (Android 8.0.0) - 1080 x 1920 pixels (~441 ppi pixel density)

Prerequisites:

1. Github account available and signed in.

Steps to Reproduce:

1. Navigate to https://staging.webcompat.com/issues/1378
2. Scroll down the page to "Comment" section.
3. Tap the "Comment" button.

Expected Behavior:
[TBD] Error message is displayed ("No comment was added").
[TBD] "Comment" button is disabled until adding details/screenshot.

Actual Behavior:
Page is refreshed and no error message is displayed.

Note

1. Affected area:

<div class="comment-body grid-cell x2">
	<div class="form-text form-element">
		<label for="newComment" class="form-label off-screen">Leave a comment</label>
		<textarea id="newComment" class="form-field text-field light js-Comment-text mousetrap" rows="2" placeholder="Leave a comment"></textarea>
		<div class="js-ImageUploadView">
			<div class="form-upload js-image-upload js-Form-group">
				<input accept=".jpe,.jpg,.jpeg,.gif,.png,.bmp" class="form-input input-upload js-buttonUpload" id="image" name="image" type="file">
					<div class="label-icon label-upload js-label-upload">
						<svg class="icon icon-big" role="presentation" title="Upload Screenshot">
							<use class="icon-upload" href="#svg-plus">Upload Screenshot</use>
						</svg>
						<small class="label-icon-message">Upload screenshot</small>
					</div>
					<div class="label-icon label-remove is-hidden js-remove-upload">
						<svg class="icon icon-big" role="presentation" title="Remove Screenshot">
							<use class="icon-remove" href="#svg-x">Remove Screenshot</use>
						</svg>
						<small class="label-icon-message">Remove screenshot</small>
					</div>
					<!--- @todo add error state -->
					<!--- @todo add loader -->
				</div>
			</div>
		</div>
		<button value="comment" class="button button-primary js-Issue-comment-button" type="submit">Comment</button>
	</div>

Watchers:
@softvision-sergiulogigan
@softvision-oana-arbuzov

[magsout]

@softvision-oana-arbuzov @zoepage I'm not able to reproduce this issue.

I tried on Firefox and Chrome and the default behavior is:

Submit a empty comment do nothing as the current version of webcompat

[miketaylr]

@softvision-oana-arbuzov @zoepage I'm not able to reproduce this issue.

Same, I believe this is already fixed.

[softvision-oana-arbuzov]

The page no longer refreshes now, but there is no error message or "Comment" button disabled.

Tested with:
Firefox Nightly 61.0a1 (2018-03-18), Chrome Desktop 65.0.3325.162
Operating System: Windows 10 Pro, Google Pixel (Android 8.0.0) - 1080 x 1920 pixels (~441 ppi pixel density)

[zoepage]

The page no longer refreshes now, but there is no error message or "Comment" button disabled.

Suggestion: As the issue is solved and the "error message" would be an enhancement, we open a follow up bug for this? (Happy to do so. Just LMK)