How stop function and display error message if one value is missing in JavaScript?

Question

I'm designing a website and I need the below function to stop when one Input value is missing and display the error message. My HTML code for the form:

<form action="http://localhost/qurantest/" method="get" target="_blank" id="my-form">
  <input type="text" name="reference-number" id="reference-number" value="" class="6u 12u$(xsmall)" placeholder="enter chapter"/>
  <input type="text" name="reference-number" id="reference-number2" value="" placeholder="enter verse"/>
  <br>
  <input type="submit" value="GO" class="button big special" />
</form>

The JavaScript function is;

<script type="text/javascript">
  var form       = document.querySelector('#my-form'),
      text_field = document.querySelector('#reference-number');
      text_field2 = document.querySelector('#reference-number2');
      
  function submitHandler(){
    // build the new url and open a new window
    var url = form.action + text_field.value + '/' + text_field2.value;
    window.open(url);

    // prevent the form from being submitted because we already 
    // called the request in a new window
    return false;
  }

  // attach custom submit handler
  form.onsubmit = submitHandler;
</script>

What I want is: To stop the function and display an error message when 1 of the two "inputs" (text_fields) is empty. Also, I want to assign maximum values for each input. (In my case I want the 1st input field to contain only numbers between 1-114 and the 2nd input field to contain only numbers from 2-286), and this specific function opens in a new window as the above code suggests, I want the function to open in the current window itself. How can I do this is JavaScript? I'm new to JS so any help would be appreciated. Thanks in Advance!!

Muhammad Rizwan · Accepted Answer · 2020-07-06 09:40:26Z

1

Check this one.

<script type="text/javascript">
              var form = document.querySelector('#my-form');
              var text_field = document.querySelector('#reference-number');
              var text_field2 = document.querySelector('#reference-number2');
              
          function submitHandler(){
             if(!text_field.value || !text_field2.value) {
              console.log("error message here");
              return;
             }
                    var url = `${form.action}${text_field.value}/${text_field2.value}`;
            window.open(url);
          return;
          }
          form.onsubmit = submitHandler;
        </script>

edited Jul 6, 2020 at 9:40

answered Jul 6, 2020 at 9:35

Muhammad Rizwan

499 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arkam Jabir Over a year ago

Baarakallahu Feekum.

Vipin Farswan · Accepted Answer · 2020-07-06 09:24:53Z

Try this

<script type="text/javascript">
      var form       = document.querySelector('#my-form'),
          text_field = document.querySelector('#reference-number');
          text_field2 = document.querySelector('#reference-number2');
          
      function submitHandler(){
         // checks values
         if(text_field.value == "" || text_field2.value == "") {
          alert("Message");
          return false;
         }
        // build the new url and open a new window
        var url = form.action + text_field.value + '/' + text_field2.value;
        window.open(url);
    
        // prevent the form from being submitted because we already 
        // called the request in a new window
        return false;
      }
    
      // attach custom submit handler
      form.onsubmit = submitHandler;
    </script>

Collectives™ on Stack Overflow

How stop function and display error message if one value is missing in JavaScript?

2 Answers 2

1 Comment

Try this

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Try this

Comments

Your Answer

Sign up or log in

Post as a guest

Related