How to use a javascript to validate a form?

Question

I was trying to build a Django form. And the javascript logic I am trying to implement is that if the input form value is not empty, then submit the form. However, I am not sure exactly how to get the id of {{form.value}}.

    <form id = "form1" action="." method="POST">{% csrf_token %}    

    <div class=".col1" style="float:left;vertical-align: middle;">          

        {{ form.region }}

        {{ form.operator }}
    </div>

    <div class="col-xs-2 style="vertical-align: middle;">
        {{ form.value }}
    </div>

    </form>


function SubmitForm1(){

if(document.getElementById( {{Form.Value}} ).value != ""){
    document.getElementById("form1").submit();
}

}

Answer 1

On the code you placed above you should be aware that the method .getElementById requires an html tag property to be passed. Please note the id="form-value" property on the div tag:

<div id="form-value" class="col-xs-2 style="vertical-align: middle;">
    {{ form.value }}
</div>

And the javascript getElementById("form-value") :

function SubmitForm1(){
  if(document.getElementById("form-value").value != ""){
      document.getElementById("form1").submit();
  }
}

You can check this here w3cschools.com: HTML DOM getElementById() Method

Answer 2

The source of your problem is that you are mixing up the code in django template, which is processed on the server side, with the code you are doing in javascript, which is processed on the client (browser) side. The variable names which exist on the server side do not exist in the same way in the browser. In javascript you can only work with elements that the template has rendered into the HTML output which was sent to the browser.

In the case of a django form, your form fields will normally be rendered with an id of id_ + the field name . So:

document.getElementById("id_region").value
document.getElementById("id_operator").value
document.getElementById("id_value").value

..etc, will give you the values of your form fields.

If you use the prefix= argument to the Form constructor in your view, eg:

myform = MyFormClass(prefix='form1')

Then the prefix ( form1 ), followed by a dash - , would be prepended to the field name of all fields in that form:

 document.getElementById("id_form1-value").value 

If you are not sure of the name or id of a field in your form, you can always do 'view source' or 'inspect element' in your browser to see what's in your html document.

Answer 3

Use onsubmit event, if return false then submit will cancel

Example: JS:

function validateForm() {
   var x = document.forms["form1"]["region"].value;
   if (x == "") {
    alert("region must be filled out");
    return false;
   }
}

HTML:

<form id = "form1" action="." method="POST" onsubmit="return validateForm()">

See more on JavaScript Form Validation