How to write a js script that verifies input on html

Question

I am trying to add validation to a html form that looks like this:

<div id="container">
  <header>
    <h1>Production Form</h1>
  </header>
  </br>
  <div class="content">
    <div class="row">
      <article class="col-xs-12">
        <form id="cf-task-form">
          <section>                   
            <br><br>
                <div class="row form-group">
                  <div class="col-xs-3">
                    <label for="link">Link</label>
                    <input type="url" id="link" class="form-control" name="output[link]">
                  </div>
                  <div class="col-xs-3">
                    <label for="address">Address</label>
                    <input id="address" class="form-control" name="output[address]">
                  </div>
                  <div class="col-xs-3">
                    <label for="research">Research</label>
                    <select id="research" name="output[research]">
                      <option value="0">0</option>
                      <option value="1">1</option>                              
                    </select>                            
                  
                </div>
          </section>

          <div class="col-xs-offset-6 col-xs-6">
            <input type="button" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
          </div>
        </form>
      </article>
    </div>
      <div class="clear"></div>
  </div>
</div>

However the code is not picking validation when I use the required attribute, how can I add validation for this within a js script that will check against the values in this html form before submitting

What have you tried so far? How are you looking to validate the text? To see if the 'link' is a URL? See if the 'Address' is an email? — Kris West, Dec 08 '21 at 07:27
I have tried to add the required attribute to make sure there is data within that textbox, however the end goal is actually to verify the input is more than one for text and a url has the correct pattern — Jowey, Dec 08 '21 at 07:46
There's information on URL parsing [here](https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url) and some high-level info on empty validation [here](https://stackoverflow.com/questions/3937513/javascript-validation-for-empty-input-field). — Kris West, Dec 08 '21 at 07:48

til_b · Accepted Answer · 2021-12-08T09:45:49.563

I think maybe you get the errors because the HTML tags were not opened and closed in the correct order, and you had an opened div that needed to be closed. Try validating the HTML code. I think it can cause problems if your html is not valid.

I added these attributes to your HTML (and validated it), and also some CSS to see the validation result.

<input type="text" id="link" class="form-control" name="output[link]" required="true" pattern="^http.*">
<input id="address" class="form-control" name="output[address]" required="true" pattern=".*street.*">

and

:invalid {
  border: 1px solid red;
}

This works and validates as expected.

:invalid {
  border: 1px solid red;
}

input {
  margin: 1em
}

<div id="container">
  <header>
    <h1>Production Form</h1>
  </header>
  <div class="content">
    <div class="row">
      <article class="col-xs-12">
        <form id="cf-task-form">
          <section>
            <div class="row form-group">
              <div class="col-xs-3">
                <label for="link">Link</label>
                <input type="text" id="link" class="form-control" name="output[link]" required="true" pattern="^http.*">
              </div>
              <div class="col-xs-3">
                <label for="address">Address</label>
                <input id="address" class="form-control" name="output[address]" required="true" pattern=".*street.*">
              </div>
              <div class="col-xs-3">
                <label for="research">Research</label>
                <select id="research" name="output[research]">
                  <option value="0">0</option>
                  <option value="1">1</option>
                </select>

              </div>


              <div class="col-xs-offset-6 col-xs-6">
                <input type="button" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
              </div>
            </div>
          </section>
        </form>
      </article>
    </div>
    <div class="clear"></div>
  </div>
</div>

Note that the validation patterns are only for testing and not real patterns that should be used!

I used this page as reference: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

score 0 · Answer 2 · answered Dec 08 '21 at 09:26

0

If you want the required attribute to work, I think you need to change your last input type to "submit" :

<input type="submit" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">

But I agree that it would be great to add some JS if you want to do proper form validation. I see some people shared useful links on the subject.

answered Dec 08 '21 at 09:26

Adeline Morel

1
2

No, it also works with the button, see my stack snippet. – til_b Dec 08 '21 at 09:48
1

Thanks, you're right ! – Adeline Morel Dec 13 '21 at 12:21

score -1 · Answer 3 · answered Dec 08 '21 at 08:31

-1

<form id="cf-task-form" onsubmit="return validateForm()">    
const link = document.querySelector("#link").value
const Address = document.querySelector("#Address").value
const research = document.querySelector("#research").value
function validateForm() {
  if (link == '') {
    alert("filled out url");
    return false;
  }
  else if (Address == '') {
    alert("filled out Address");
    return false;
  }
  else if (research == '') {
    alert("filled out research");
    return false;
  }
}

answered Dec 08 '21 at 08:31

pawan siliwal

9
2

1. here is no ` – rzlvmp Dec 08 '21 at 08:42
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – bitski Dec 08 '21 at 08:54

How to write a js script that verifies input on html

3 Answers3