I am developing a web application using Python and CGI. For form validation, I intend to use JavaScript. Here is the scenario - There is a textbox where in user enters the name of the project and clicks the submit button. I want to catch if nothing is entered in the textbox and throw an alert.
For the JavaScript function, I have used parameters, project_form (for the form) and project_name for the textbox. But what I am not clear about is where to put this function. As of now, I am trying to put it in the form tag itself. But it is not working. I somehow think that I have to pass the project_form and project_name parameters to the function and due to th e code structure, it is not possible for me to put the function in the 'head' section. I am pasting my code here. Thanks for the help.
<form action="create_project.py" method="POST" name="project_form">
<input type="text" name="project_name" size="40" onclick="javascript:document.project_form.submit.disabled=false"
id="acpro_inp0">
<br>
<script type="text/javascript">
function ValidateTextbox(project_form, project_name) {
var tb_value = project_form.project_name.value;
if (tb_value == null || tb_value.trim() == "") {
alert("Please enter something");
project_form.project_name.focus();
return false;
}
return true;
}
</script>
return ValidateTextbox('project_form','project_name')
<p>
</p>
<input type="submit" name="submit" value="Submit" onsubmit="return ValidateTextbox('project_form','project_name')"
disabled="">
</form>
Here is the related Python code -
import yate
import jshelper
print yate.start_response()
print yate.include_header("Create a new project.")
#Section to create a new project
print yate.start_form("create_project.py","project_form")
print yate.text_box("project_name",form_name="project_form")
jshelper.JSTextBoxValidate("project_form","project_name")
print yate.end_form("Submit",is_disabled = 'True', onsubmit_callback = "return ValidateTextbox('project_form','project_name')")
print yate.include_footer(({"Home": "../index.html"}))
Here is another piece of Python code, where I try to create the JS function on the fly.
def JSTextBoxValidate(form_name,tb_name):
print '<script type="text/javascript">'
print 'function ValidateTextbox' + '(' + form_name + ',' + tb_name + ')'
print '{'
print 'var tb_value = ' + form_name + '.' + tb_name + '.' + 'value;'
print 'if (tb_value==null || tb_value.trim()=="")'
print '{'
print 'alert("Please enter something");'
print form_name + '.' + tb_name + '.' + 'focus();'
print 'return false;'
print '}'
print 'return true;'
print '}'
print '</script>'
Somehow I have a feeling that I am probably not on the right track in this process and there has to be a better way. So I will be thankful for helping me to get this thing to work. Note - The package yate is from Head First Python and I am using and extending the template from that code. I have put similar note in my project's documentation. This is my personal project.
Rewriting your HTML code the way it should work:
<script type="text/javascript">
function ValidateTextbox(input) { //we take an object representation of the HTML <input> tag (not just a string)
if (input.value.trim() == "") { //the attribute value is already defined in the tag now, so it couldn't be null
alert("Please enter something");
input.focus(); //move the cursor to the incriminated input
return false; //preventing from submitting the form (assuming the function is called as a return value)
}
return true; //allowing the form to be submitted (assuming the function is called as a return value)
}
//function added a you seemed to need something like that
function DisableFormSubmit(theForm, e) { //we take the form object as argument, and e may be the event object given from the keypress event
var submitButton=theForm.submit; //to ease typing this code, the submit button is assigned to a local variable
if(theForm.project_name.value.trim()=='') { //if we have no value for the project_name input of the form
submitButton.disabled=true; //we disable the submit button
submitButton.value="Submit - enter a name first"; //and we give a hint why it is disabled in the text printed on the button
} else { //in this case project_name has a valid value
submitButton.disabled=false; //the submit button is enabled
submitButton.value="Submit"; //we remove the hint we gave
}
//processing the event now, to know what to return (key 13 is Enter, returning false on it will prevent the form from being submitted by pressing Enter)
if(window.event) //MSIE compatibility
return window.event.keyCode!=13;
else if(e) //web browser's behavior
return e.which!=13;
}
}
</script>
<form action="create_project.py" method="POST" name="project_form" onsubmit="return ValidateTextBox(this.project_name);">
<input type="text" name="project_name" value="" size="40" onkeypress="return DisableFormSubmit(this.form, event);" id="acpro_inp0">
<br>
<input type="submit" name="submit" value="">
</form>
<script type='text/javascript'>
DisableFormSubmit(document.forms['project_form']); //we call this function once after the <form> has loaded so that we init the submit button with a standard way
</script>
For the Python code, I can't tell as I don't know this language, but you don't need to create as JS function "on the fly" to do a client-side check of the form's validity. Mind the client-side thing, meaning not secure, meaning if you absolutely need a value in that field, do a second check server-side (with Python apparently). Your problem is that:
<script></script>
tags 'project_form'
and 'project_name'
- notice the quotes - you needed something like document.project_form
or document.forms['project_form']
and one of the previous with .project_name
appended. Notice the lack of quotes here. onsubmit
in an <input>
while its place should be in the <form>
(this point may not be a cause of error though) Hope this helps ;)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.