Блог

Я использую пользовательскую clean() функцию в одной из моих форм для требования к условному полю. Я могу вызвать ошибку проверки в моем шаблоне как часть использования DOM {{ form.non_field_errors }} . Я хотел бы, чтобы ошибка проверки отображалась в виде всплывающего окна, как это делают ошибки по умолчанию, но не знаю, как это сделать.

Вот пользовательская clean() функция:

 class ReportForm(forms.Form):
    def clean(self):
        cleaned_data = super().clean()
        class_type = cleaned_data.get("class_type")
        class_other = cleaned_data.get("class_other")
        if class_type == "Other":
            if not class_other:
                msg = "Please fill out this field."
                raise ValidationError(msg)
 

Я не знаю, что добавить в представления или шаблон, чтобы он отображался как всплывающее окно — в настоящее время у меня там нет ничего особенного. Возможно ли это с помощью Django, или мне нужно использовать javascript?

Под «всплывающим окном» вы, вероятно, имеете в виду окно предупреждения. Браузеры генерируют его, когда пользователь пытается отправить форму с незавершенным вводом html. Вы можете добавить требуемое поле следующим образом:

     class BasicForm(forms.Form):
        name = forms.CharField(
            max_length = 35, 
            widget = forms.TextInput(
                attrs = {
                    "id" : "name",
                    "class" : "input-class",
                    "placeholder" : "Insert Your Name",
                    "required" : "required", # <--- HERE YOU GO
                }
            )
        )
 

Вы можете заставить браузер сгенерировать окно оповещения, даже если форма заполнена с помощью javascript. Например:

 btn = document.getElementById("button");
inp = document.getElementById("name");

// this piece of code will wait for the user to 
// release a keyboard button having the input#name focused
// then will call the function
inp.addEventListener("keyup", event => {
  // I get the input value
  current_name = inp.value;
  // Checking if the name is longer than 8 characters
  if (current_name.length > 8) {
    // I will open an alert box
    alert("Your name is too long!");
  }
});

// this piece of code will wait for the user to 
// click on the input#button, then will 
// clear the input
btn.addEventListener("click", event => {
  // Clearing the input value
  inp.value = "";
}); 

 <form method="POST">
  <input type="text" id="name" class="input-class" required>
  <input type="button" id="button" value="clear"/>
 </form>