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.

JavaScript: The Good Parts (Paperback)

By (author): Douglas Crockford


List Price: $29.99 USD
New From: $15.90 USD In Stock
Used from: $11.00 USD In Stock

JavaScript: The Definitive Guide (Paperback)

By (author): David Flanagan


List Price: $49.99 USD
New From: $26.71 USD In Stock
Used from: $0.22 USD In Stock

Share