Question

Is there a way to make a field required for form submission?

I can use HTML, Javascript or PHP to do this – whichever works.

I want to ensure that a form is not submitted with a blank value. Also it would be nice if I could make it so that users HAD to input values into certain fields.

EDIT: I don’t really want to use jQuery at the moment as I’m not sure that my boss wants me to use jQuery.

Tried to do this:

<script type="text/javascript">
    $('addorg').submit(function(){
    if($('orgname').val()==""){
        alert("Organization Name must be Filled");
        return false;
    }
})
    </script>

And here’s the HTML it is working on:

<form name="addorg" action="addorg.php" enctype="multipart/form-data" method="POST">
    <div id="orgdiv"> <fieldset><label for="orgname">Organization Name</label>
            <input type="text" name="orgname" id="orgname"/>
        </fieldset>
    </div>

This is for client-side validation. I can handle server-side validation, my PHP is far better than my Javascript or jQuery.

The client-side validation did not seem to work.

Answer 1

You can do this in either JavaScript or PHP. JS is more user friendly and easier to code, but can be bypassed by determined users. It also may not function on some browsers or with some settings allowing users to continue as if there were no validation, but those cases are usually rare. I would recommend a JS solution unless this is a corporate website or has no room for error.

You can do this by modifying your form tag with an onSubmit function:

 <form action="whatever" method="post" onSubmit="checkStuff();">
      <input id="field_1" name="field_1"...>

You then need to create that function and place it in the head of your page. It should read something like:

 function checkStuff() {
      // By default, we plan to submit the form.
      var formOkay = 1;

      // Check to see if field_1 has a value.  If not, we note that by changing our variable.
      if (document.getElementById('field_1').value == '') formOkay = 0;
      ...

      // Let the user know something is wrong somehow.  An alert is easiest.
      alert('fill out everything, ya goof!');

      // If you return true the form will submit.  If you return false it will not.
      if (formOkay == 1) {
           return true;
      } else {
           return false;
      }
 }

Note that your inputs must have an id attribute for this approach to work (though it’s possible to modify my code to work with names too). I would make the id the same value as the field name. You can add additional checks for more fields where I placed the ellipsis. This code could be written more efficiently and cleanly, but I thought this approach would be easiest to understand and modify.

This is off the top of my head and hasn’t been tested, but should get you working down the right track. If you have additional questions, please let me know.

EDIT:
I just wanted to follow up to agree with others that if you have the time and inclination, or this is a work related issue, you should validate both ways. JS provides a better, more user friendly method, while PHP insures nobody can just circumvent the JS to break your rules.

I don’t know PHP, but your pseudo code would be something like this:

 if field_1 = "" then
      // Option 1
      Print("Please press back and fill out field 1!")
      AbortPage()
      // Option 2
      Redirect("form.php?error=Please fill out field 1&[other form values]")
 end if

In the case of option 2 you would modify the form page to detect url variables and place them into the inputs. You would also modify it to look for a url variable called ‘error’ and display the contents if found.