CODEWITHSUNDEEP
javascripthtmlformsinput
edo461
edo461

Reputation: 1

How can I prohibit the submission of a form under certain conditions? Javascript

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

Upvotes: 0

Views: 38

Answers (2)

Wongjn
Wongjn

Reputation: 23933

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

Upvotes: 1

Brother58697
Brother58697

Reputation: 3178

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

Upvotes: 1

Related Questions