Проверка формы JavaScript - для проверки пустого текстового поля - с использованием Python и CGI

Question

Я занимаюсь разработкой веб-приложения с использованием Python и CGI.Для проверки формы я намерен использовать JavaScript.Вот сценарий. Здесь есть текстовое поле, в котором пользователь вводит название проекта и нажимает кнопку «Отправить».Я хочу отловить, если в текстовое поле ничего не введено, и выдать предупреждение.

Для функции JavaScript я использовал параметры, project_form (для формы) и project_name для текстового поля.Но я не совсем понимаю, где поставить эту функцию.На данный момент я пытаюсь поместить его в сам тег формы.Но это не работает.Я почему-то думаю, что мне нужно передать параметры project_form и project_name в функцию, и из-за структуры кода я не могу поместить функцию в раздел «head».Я вставляю свой код здесь.Спасибо за помощь.

<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>

Вот соответствующий код Python -

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"}))

Вот еще один фрагмент кода Python, где я пытаюсь создать функцию JS на лету.

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>'

Почему-то у меня такое чувство, что я, вероятно, не на правильном пути в этом процессе, и должен быть лучший путь.Так что я буду благодарен за то, что помог мне заставить эту штуку работать.Примечание. Пакет yate взят из Head First Python, и я использую и расширяю шаблон из этого кода.Я поместил подобное примечание в документацию моего проекта.Это мой личный проект.

Answer 1

Переписав ваш HTML-код так, как он должен работать:

<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>

Для кода Python я не могу сказать, поскольку я не знаю этот язык, но вам не нужно создавать какФункция JS «на лету» выполняет проверку правильности формы на стороне клиента.Помните о стороне клиента, что означает небезопасность, то есть, если вам абсолютно необходимо значение в этом поле, сделайте вторую проверку на стороне сервера (очевидно, с Python).Ваша проблема в том, что:

• вы пытаетесь создать инструкцию Javascript из <script></script> тегов
• , вы задаете строки в качестве аргументов, в то время как вам действительно нужны представления объектов тегов HTML: вместодавая 'project_form' и 'project_name' - обратите внимание на кавычки - вам нужно что-то вроде document.project_form или document.forms['project_form'] и один из предыдущих с добавлением .project_name.Обратите внимание на отсутствие кавычек.
• вы использовали атрибут onsubmit в <input>, в то время как его место должно быть в <form> (хотя этот пункт не может быть причиной ошибки)

Надеюсь, это поможет;)