I have a feedback form with a rating for the institution. How can I prohibit the submission of the form if the rating is not selected and there are less than 10 characters in the comment?

<form  action="">
    <div >
        <input  type="radio" id="star-1" name="rating" value="1">
        <label for="star-1" title="Rating «1»"></label>
      
        <input  type="radio" id="star-2" name="rating" value="2">
        <label for="star-2" title="Rating «2»"></label>
      
        <input  type="radio" id="star-3" name="rating" value="3">
        <label for="star-3" title="Rating «3»"></label>
      
        <input  type="radio" id="star-4" name="rating" value="4">
        <label for="star-4" title="Rating «4»></label>
      
        <input  type="radio" id="star-5" name="rating" value="5">
        <label for="star-5" title="Rating «5»"></label>
      
      </div>
      <input  type="textarea"  name="text">
     <button >Send</button>
    </form>

CodePudding user response：

If you don't plan to do any custom validation, you can use the inbuilt form validation.

In this case:

• We add a required attribute to one of the radios to make them required.
• We add required to the comment and minLength="10" to specify that constraint

<form  action="">
    <div >
        <input  type="radio" id="star-1" name="rating" value="1" required>
        <label for="star-1" title="Rating «1»"></label>
      
        <input  type="radio" id="star-2" name="rating" value="2">
        <label for="star-2" title="Rating «2»"></label>
      
        <input  type="radio" id="star-3" name="rating" value="3">
        <label for="star-3" title="Rating «3»"></label>
      
        <input  type="radio" id="star-4" name="rating" value="4">
        <label for="star-4" title="Rating «4»></label>
      
        <input  type="radio" id="star-5" name="rating" value="5">
        <label for="star-5" title="Rating «5»"></label>
      
      </div>
      <input  type="textarea"  name="text" required minLength="10">
     <button >Send</button>
    </form>

CodePudding user response：

We can use client-side validation HTML attributes on the form elements to add restrictions.

Radios

We can add the required attribute on the rating radios to ensure that one of them needs to be selected, as per MDN documentation on the required attribute

In the case of a same named group of radio buttons, if a single radio button in the group has the required attribute, a radio button in that group must be checked, although it doesn't have to be the one with the attribute is applied. So to improve code maintenance, it is recommended to either include the required attribute in every same-named radio button in the group, or else in none.

Comment

For the comment input (note: textarea is not a valid <input> type, did you mean text or perhaps <textarea>?), we can again use the required attribute to ensure some input is entered, but this will not ensure a minimum length of 10 characters. To ensure a minimum length of characters, we can use the minlength attribute, for either <input> or <textarea>.

Result

This results in your form markup looking like this:

<form  action="">
    <div >
        <input required  type="radio" id="star-1" name="rating" value="1">
        <label for="star-1" title="Rating «1»"></label>
      
        <input required  type="radio" id="star-2" name="rating" value="2">
        <label for="star-2" title="Rating «2»"></label>
      
        <input required  type="radio" id="star-3" name="rating" value="3">
        <label for="star-3" title="Rating «3»"></label>
      
        <input required  type="radio" id="star-4" name="rating" value="4">
        <label for="star-4" title="Rating «4»"></label>
      
        <input required  type="radio" id="star-5" name="rating" value="5">
        <label for="star-5" title="Rating «5»"></label>
      
      </div>
      <input required minlength="10"  type="text"  name="text">
   <button >Send</button>
</form>

Also note, as per the MDN documentation:

Client-side validation is useful, but it does not guarantee that the server will receive valid data. If the data must be in a specific format, always verify it also on the server-side, and return