Javascript user's input validation on submit

Question

HTML:

      <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
        <form name="#" method="POST" onsubmit="return validateForm();">
            <table>
                <tr>
                    <td>Select Warehouse:</td>
                    <td><input type="text" id="W_ID" name="W_ID" placeholder="numbers only"></td>
                    <span class="invalid-feedback"><?php echo $warehouse_err; ?></span>
                </tr>
                <tr>
                    <td>Select District:</td>
                    <td><input type="text" id="D_ID" name="D_ID" placeholder="numbers only"></td>
                    <span class="invalid-feedback"><?php echo $district_err; ?></span>
                </tr>
                <tr>
                    <td>Select Customer:</td>
                    <td><input type="text" id="C_ID" name="C_ID" placeholder="numbers only"></td>
                    <span class="invalid-feedback"><?php echo $customer_err; ?></span>
                </tr>
            </table>

So I tried to validate user's input for W_ID, C_ID and D_ID. For example, if a user input is some strings then return an error message before submitting. I wrote some Javascript code in this .php file but I couldn't get it to work. Please see JS codes below:

Javascript:

        <script>
        function validateForm(){
        var W_ID = document.getElementById("W_ID").value;
        var D_ID = document.getElementById("D_ID").value;
        var C_ID = document.getElementById("C_ID").value;
        var numbers = /^[0-9]+$/;

        //check if input is number
        if(!(W_ID.value.match(numbers) {
            alert('Please only enter numbers.');
        }
        else if(!(D_ID.value.match(numbers) {
            alert('Please only enter numbers.');
        }
        else if(!(C_ID.value.match(numbers) {
            alert('Please only enter numbers.');
        }else {
            alert('Successfully! form has been submitted.');
        }
        </script>

Also how do I wrap JS code inside the PHP? Thank you so much! I've been stuck for long time

W_ID, D_ID, C_ID are values not elements, so you can use them directly, instead of W_ID.value.match(). ( should be W_ID.match() ) — D Coder
– D Coder, Commented Nov 5, 2021 at 6:08

Nawaf Khalifah · Accepted Answer · 2021-11-05 06:15:26Z

1

"form must not contain other form elements." so you don't have to use two <form> tags.

Just give your form an ID, and in JavaScript handle the submit event.

<form
   id="myForm"
   action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>"
   method="POST"
   >
   <table>
      <tr>
         <td>Select Warehouse:</td>
         <td>
            <input
               type="text"
               id="W_ID"
               name="W_ID"
               placeholder="numbers only"
               />
         </td>
         <span class="invalid-feedback"><?php echo $warehouse_err; ?></span>
      </tr>
      <tr>
         <td>Select District:</td>
         <td>
            <input
               type="text"
               id="D_ID"
               name="D_ID"
               placeholder="numbers only"
               />
         </td>
         <span class="invalid-feedback"><?php echo $district_err; ?></span>
      </tr>
      <tr>
         <td>Select Customer:</td>
         <td>
            <input
               type="text"
               id="C_ID"
               name="C_ID"
               placeholder="numbers only"
               />
         </td>
         <span class="invalid-feedback"><?php echo $customer_err; ?></span>
      </tr>
   </table>
   <button type="submit">Submit</button>
</form>

The script may look like this:

var form = document.getElementById("myForm");

form.addEventListener("submit", function (e) {
  e.preventDefault();

  var target = e.target;
  var formData = new FormData(target);
  var data = Object.fromEntries(formData.entries());

  var regex = /^[0-9]+$/;
  if (
    !data.W_ID.match(regex) ||
    !data.D_ID.match(regex) ||
    !data.C_ID.match(regex)
  ) {
    alert("Only numbers accepted.");
  } else {
    // Continue form submittion.
    this.submit();
  }
});

https://codesandbox.io/s/keen-galileo-tvznl?file=/script.js:0-439

answered Nov 5, 2021 at 6:15

Nawaf Khalifah

8167 silver badges14 bronze badges

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

2 Comments

Project Destoryer Over a year ago

Thank you so much! And do you know if i want to use it in a .php file, do I just use " <?php echo " javascrip code"; ?>" ?

Nawaf Khalifah Over a year ago

If you working with PHP, always try your best to separate your PHP logic from frontend code, this example might help you: codesandbox.io/s/keen-galileo-tvznl?file=/index.php

Collectives™ on Stack Overflow

Javascript user's input validation on submit

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related