Use JavaScript To Require Data To Be Entered Into A Form Field Before It Can Be Submitted

I needed a simple way to require data in a form field before it could be submitted. There are chunks of JavaScript code all of the Internet that allow you to do this easily so I selected one and added it to my form with ease. One small issue I had was it required that the name attribute be modified for it to work which caused an issue with the application I was adding it to. The issue was the name attribute was modified thus it would not save the data to the proper database table column. Below I explain how to add this bit of JavaScript to your form and modify your form for it to function properly.

The initial JavaScript I located used the input element name attribute to trigger the requirement message to pop up. This did not work for me and I imagine it would not work for others who are submitting data to an application because applications typically use the name attribute as well. The below JavaScript was slightly modified to use the input element alt attribute instead.

Require Data Be Entered In A Form Field Before It Is Submitted:

1. Add JavaScript: First in the head portion of your page add the below JavaScript.

   JavaScript To Add To Head Section Of Page:

   <script type='text/JavaScript'>
           function checkrequired(which){
           var pass=true
           if (document.images){
           for (i=0;i<which.length;i++){
           var tempobj=which.elements[i]
           if (tempobj.alt.substring(0,8)=="required"){
           if (((tempobj.type=="text"||tempobj.type=="textarea")&amp;&amp;tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&amp;&amp;tempobj.
   selectedIndex==-1)){
                   pass=false
           break
           }
           }
           }
           }
           if (!pass){
           alert("One or more of the required elements are not completed. Please complete them, then submit again!")
           return false
           }
           else
           return true
           }
           </script>
           <script type='text/JavaScript' src='/content/js/scw.js'></script>
           <script type="text/javascript">
               $().ready(function(){
                   $("#nav_profile").attr('className',"on");
                   $("#cancel").bind('click', function(){history.go(-1);})
               });    
           </script>
   

2. Modify Form Element: Now in the form element place the below attribute which will trigger once the form is submitted. Any input field that has “required” as part of the alt tag will require data to be entered into that field.

   JavaScript To Add To Form Element:
   

   onSubmit="return checkrequired(this)"
   

   The entire form element would look like the below now that this JavaScript has been added.

   Example Form Element With JavaScript Added:
   

   <form name="" onSubmit="return checkrequired(this)" action="{% url edit_user request.user.id %}" method="post">
   

3. Modify Input Fields: Once the two steps have been completed you are now ready to select the required input fields and add the necessary trigger. Again the trigger will be the “alt” attribute so any input field that has an alt tag with the word required in it will require data be entered into that form field before it will allow the form to be submitted. You can customize the pop up message by editing the JavaScript in step one.

   Example Input Field With Added Alt Tag:

   <input id="id_date" alt="required" name="date" onclick='scwShow(this,event);' value='{{ user.dat
   e }}'/>
   

I would suggest adding the alt tag to one form field to verify everything is functioning before adding to a bunch of fields. That is all you have to do though. If you have a site with many pages you should make sure to only load the above JavaScript to this page so it doesn’t cause extra weight for every page on your web site.

See larger image JavaScript: The Good Parts (Paperback) By (author) Douglas Crockford List Price: $29.99 USD New From: $15.01 In Stock Used from: $14.00 In Stock

See larger image JavaScript: The Definitive Guide (Paperback) By (author) David Flanagan List Price: $49.99 USD New From: $11.00 In Stock Used from: $0.57 In Stock

This entry was posted on Thursday, December 31st, 2009 at 10:27 PM and is filed under Code Snippets. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.