我的Django表单不会保存，因为我已经使用Tailwindcss对其进行了样式化？

eimct9ow  于 2023-06-25  发布在  Go
关注(0)|答案(1)|浏览(95)

因为我已经开始使用Tailwind CSS样式我的形式，它不会保存。我之前传递了像这样的表单{{ form.as_p }}，但想设计它的样式。现在我已经设置了表单的样式，它不能正确地提交数据。我已经被困在这个年龄，任何帮助将不胜感激。下面是所有相关代码。
HTML模板：

{% load static %}

<head>
  <link href="{% static 'src/output.css' %}" rel="stylesheet" />
  <title>Surfer Creation Form</title>
</head>

<body class="bg-gradient-to-tr from-pink-500 via-purple-500 to-blue-500">
  {% include 'include/messages.html' %}

  <form method="post" action="{% url 'roxy:UserCreate_Surfer' %}">
    {% csrf_token %}

    <!-- User Creation Form -->
    <div class="flex justify-center items-center">
      <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 my-2">
        <h2 class="mb-4">Start your surfing journey now!</h2>
        <!--Name fields -->
        <div class="-mx-3 md:flex mb-6">
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ user_form.first_name.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ user_form.first_name.label }}:
            </label>
            <input
              type="text"
              name="{{ user_form.first_name.html_name }}"
              id="{{ user_form.first_name.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>

          <!-- Last name field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ user_form.last_name.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ user_form.last_name.label }}:
            </label>
            <input
              type="text"
              name="{{ user_form.last_name.html_name }}"
              id="{{ user_form.last_name.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>
        </div>

        <!-- Email field -->
        <div class="md:w-full">
          <label
            for="{{ user_form.email.id_for_label }}"
            class="block text-sm font-normal"
            >{{ user_form.email.label }}:
          </label>
          <input
            type="email"
            name="{{ user_form.email.html_name }}"
            id="{{ user_form.email.auto_id }}"
            class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
            placeholder="youremail@example.com"
            required
          />
        </div>

        <!-- Password fields -->

        <div class="-mx-3 md:flex mb-6">
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ user_form.password1.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ user_form.password1.label }}:
            </label>
            <input
              type="password"
              name="{{ user_form.password1.html_name }}"
              id="{{ user_form.password1.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>

          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ user_form.password2.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ user_form.password2.label }}:
            </label>
            <input
              type="password"
              name="{{ user_form.password2.html_name }}"
              id="{{ user_form.password2.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>
        </div>

        <!-- Surfer Form -->

        <!-- Split box -->
        <div class="-mx-3 md:flex mb-6">
          <!-- Age field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.age.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.age.label }}:
            </label>
            <input
              type="number"
              name="{{ surfer_form.age.html_name }}"
              id="{{ surfer_form.age.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>

          <!-- DOB field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.DOB.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.DOB.label }}:
            </label>
            <input
              type="date"
              name="{{ surfer_form.DOB.html_name }}"
              id="{{ surfer_form.DOB.auto_id }}"
              class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>
        </div>

        <!-- Split box -->
        <div class="-mx-3 md:flex mb-6">
          <!-- Gender field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.gender.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.gender.label }}:
            </label>
            <select
              name="{{ surfer_form.gender.html_name }}"
              id="{{ surfer_form.gender.auto_id }}"
              class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            >
              <option value="">Select Gender</option>
              <option value="Male">Male</option>
              <option value="Female">Female</option>
              <option value="Female">Non-binary</option>
              <option value="Other">Other</option>
            </select>
          </div>

          <!-- Race field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.race.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.race.label }}:
            </label>
            <input
              type="text"
              name="{{ surfer_form.race.html_name }}"
              id="{{ surfer_form.race.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>
        </div>

        <!-- Phone number field -->
        <div class="md:w-full">
          <label
            for="{{ surfer_form.phone_number.id_for_label }}"
            class="block text-sm font-normal mb-2"
            >{{ surfer_form.phone_number.label }}:
          </label>
          <input
            type="tel"
            name="{{ surfer_form.phone_number.html_name }}"
            id="{{ surfer_form.phone_number.auto_id }}"
            class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
            required
          />
        </div>

        <!-- Split box -->
        <div class="-mx-3 md:flex mb-6">
          <!-- Adress field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.address.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.address.label }}:
            </label>
            <input
              type="text"
              name="{{ surfer_form.address.html_name }}"
              id="{{ surfer_form.address.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>

          <!-- Country field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.country.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.country.label }}:
            </label>
            <input
              type="text"
              name="{{ surfer_form.country.html_name }}"
              id="{{ surfer_form.country.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>
        </div>

        <!-- Split box -->
        <div class="-mx-3 md:flex mb-6">
          <!-- Occupation field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.occupation.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.occupation.label }}:
            </label>
            <input
              type="text"
              name="{{ surfer_form.occupation.html_name }}"
              id="{{ surfer_form.occupation.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>

          <!-- School field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.school.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.school.label }}:
            </label>
            <input
              type="text"
              name="{{ surfer_form.school.html_name }}"
              id="{{ surfer_form.school.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>
        </div>

        <!-- Onset of condition field -->
        <div>
          <label
            for="{{ surfer_form.onset_of_condition.id_for_label }}"
            class="block text-sm font-normal mb-2"
            >{{ surfer_form.onset_of_condition.label }}:
          </label>
          <input
            type="date"
            name="{{ surfer_form.onset_of_condition.html_name }}"
            id="{{ surfer_form.onset_of_condition.auto_id }}"
            class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
            required
          />
        </div>

        <!-- Medical issues field -->
        <div class="md:w-full">
          <label
            for="{{ surfer_form.medical_issues.id_for_label }}"
            class="block text-sm font-normal mb-2"
            >{{ surfer_form.medical_issues.label }}:
          </label>
          <textarea
            name="{{ surfer_form.medical_issues.html_name }}"
            id="{{ surfer_form.medical_issues.auto_id }}"
            rows="3"
            class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
            required
          ></textarea>
        </div>

        <!-- Diagnosis and needs field -->
        <div class="md:w-full">
          <label
            for="{{ surfer_form.diagnosis_and_needs.id_for_label }}"
            class="block text-sm font-normal mb-2"
            >{{ surfer_form.diagnosis_and_needs.label }}:
          </label>
          <textarea
            name="{{ surfer_form.diagnosis_and_needs.html_name }}"
            id="{{ surfer_form.diagnosis_and_needs.auto_id }}"
            rows="3"
            class="border md:w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
            required
          ></textarea>
          <!-- Error message -->
        </div>

        <!-- Medication field -->
        <div class="md:w-full">
          <label
            for="{{ surfer_form.medication.id_for_label }}"
            class="block text-sm font-normal mb-2"
            >{{ surfer_form.medication.label }}:
          </label>
          <textarea
            name="{{ surfer_form.medication.html_name }}"
            id="{{ surfer_form.medication.auto_id }}"
            rows="3"
            class="border md:w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
            required
          ></textarea>
        </div>

        <!-- Extra info field -->
        <div class="md:w-full">
          <label
            for="{{ surfer_form.extra_info.id_for_label }}"
            class="block text-sm font-normal mb-2"
            >{{ surfer_form.extra_info.label }}:
          </label>
          <textarea
            name="{{ surfer_form.extra_info.html_name }}"
            id="{{ surfer_form.extra_info.auto_id }}"
            rows="3"
            class="border md:w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
            required
          ></textarea>
        </div>

        <!-- Split box -->
        <div class="-mx-3 md:flex mb-6">
          <!-- Swim longer than 5 minutes field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.swim_longer_than_5_min.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.swim_longer_than_5_min.label }}:
            </label>
            <select
              name="{{ surfer_form.swim_longer_than_5_min.html_name }}"
              id="{{ surfer_form.swim_longer_than_5_min.auto_id }}"
              class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            >
              <option value="">Select an option</option>
              <option value="True">Yes</option>
              <option value="False">No</option>
            </select>
          </div>

          <!-- Comfortability in ocean field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.comfortability_in_ocean.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >Comfortable are you in the ocean?:</label
            >
            <select
              name="{{ surfer_form.comfortability_in_ocean.html_name }}"
              id="{{ surfer_form.comfortability_in_ocean.auto_id }}"
              class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            >
              <option value="">Select an option</option>
              <option value="Very Comfortable">Very Comfortable</option>
              <option value="Comfortable">Comfortable</option>
              <option value="Kind of Comfortable">Kind of Comfortable</option>
              <option value="A Bit Uncomfortable">A Bit Uncomfortable</option>
              <option value="Uncomfortable">Uncomfortable</option>
              <option value="Very Uncomfortable">Very Uncomfortable</option>
            </select>
          </div>
        </div>

        <!-- Split box -->
        <div class="-mx-3 md:flex mb-6">
          <!-- Emergency contact first name field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.emergency_contact_first_name.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.emergency_contact_first_name.label }}:
            </label>
            <input
              type="text"
              name="{{ surfer_form.emergency_contact_first_name.html_name }}"
              id="{{ surfer_form.emergency_contact_first_name.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>

          <!-- Emergency contact last name field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.emergency_contact_last_name.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.emergency_contact_last_name.label }}:
            </label>
            <input
              type="text"
              name="{{ surfer_form.emergency_contact_last_name.html_name }}"
              id="{{ surfer_form.emergency_contact_last_name.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>
        </div>

        <!-- Emergency contact cell field -->
        <div class="md:w-full">
          <label
            for="{{ surfer_form.emergency_contact_cell.id_for_label }}"
            class="block text-sm font-normal mb-2"
            >{{ surfer_form.emergency_contact_cell.label }}:
          </label>
          <input
            type="tel"
            name="{{ surfer_form.emergency_contact_cell.html_name }}"
            id="{{ surfer_form.emergency_contact_cell.auto_id }}"
            class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
            required
          />
        </div>

        <!-- Split box -->
        <div class="-mx-3 md:flex mb-6">
          <!-- Doctor's first name field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.dr_first_name.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.dr_first_name.label }}:
            </label>
            <input
              type="text"
              name="{{ surfer_form.dr_first_name.html_name }}"
              id="{{ surfer_form.dr_first_name.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>

          <!-- Doctor's last name field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.dr_last_name.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.dr_last_name.label }}:
            </label>
            <input
              type="text"
              name="{{ surfer_form.dr_last_name.html_name }}"
              id="{{ surfer_form.dr_last_name.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>
        </div>

        <!-- Doctor's cell field -->
        <div class="md:w-full">
          <label
            for="{{ surfer_form.dr_cell.id_for_label }}"
            class="block text-sm font-normal mb-2"
            >{{ surfer_form.dr_cell.label }}:
          </label>
          <input
            type="tel"
            name="{{ surfer_form.dr_cell.html_name }}"
            id="{{ surfer_form.dr_cell.auto_id }}"
            class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
            required
          />
        </div>

        <!-- Split box -->
        <div class="-mx-3 md:flex mb-6">
          <!-- Medical aid field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.medical_aid.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.medical_aid.label }}:
            </label>
            <input
              type="text"
              name="{{ surfer_form.medical_aid.html_name }}"
              id="{{ surfer_form.medical_aid.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>

          <!-- Medical aid number field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.medical_aid_num.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.medical_aid_num.label }}:
            </label>
            <input
              type="text"
              name="{{ surfer_form.medical_aid_num.html_name }}"
              id="{{ surfer_form.medical_aid_num.auto_id }}"
              class="border border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            />
          </div>
        </div>

        <!-- Split box -->
        <div class="-mx-3 md:flex mb-6">
          <!-- Accept TandC field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.accept_TandC.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.accept_TandC.label }}:
            </label>
            <select
              name="{{ surfer_form.accept_TandC.html_name }}"
              id="{{ surfer_form.accept_TandC.auto_id }}"
              class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            >
              <option value="">Select an option</option>
              <option value="Yes">Yes</option>
              <option value="No">No</option>
            </select>
          </div>

          <!-- Receive newsletter field -->
          <div class="md:w-1/2 px-3 mb-6 md:mb-0">
            <label
              for="{{ surfer_form.receive_newsletter.id_for_label }}"
              class="block text-sm font-normal mb-2"
              >{{ surfer_form.receive_newsletter.label }}:
            </label>
            <select
              name="{{ surfer_form.receive_newsletter.html_name }}"
              id="{{ surfer_form.receive_newsletter.auto_id }}"
              class="border w-full border-gray-300 rounded px-4 py-2 mb-4 input-field"
              required
            >
              <option value="">Select an option</option>
              <option value="Yes">Yes</option>
              <option value="No">No</option>
            </select>
          </div>
        </div>

        <!-- Submit button -->
        <div class="mb:w-full">
          <button
            type="submit"
            class="bg-blue-500 hover:bg-blue-700 w-full text-white font-normal py-2 px-4 rounded"
          >
            Submit
          </button>
        </div>
      </div>
    </div>
  </form>
</body>

models.py:

class Surfer(models.Model):
    """Model representing a surfer."""

    first_name = models.CharField(max_length=100)
    last_name = models.CharField(max_length=100)
    email = models.EmailField(primary_key=True)
    phone_number = models.CharField(max_length=100)
    address = models.CharField(max_length=100)
    country = models.CharField(max_length=100)
    DOB = models.DateField()
    onset_of_condition = models.DateField()
    gender = models.CharField(max_length=100)
    race = models.CharField(max_length=100)
    medical_issues = models.CharField(max_length=1000)
    occupation = models.CharField(max_length=100)
    school = models.CharField(max_length=100)
    diagnosis_and_needs = models.CharField(max_length=1000)
    medication = models.CharField(max_length=500)
    extra_info = models.CharField(max_length=500)
    swim_longer_than_5_min = models.BooleanField()
    comfortablity_in_ocean = models.CharField(max_length=100)
    age = models.PositiveIntegerField()
    emergency_contact_first_name = models.CharField(max_length=100)
    emergency_contact_last_name = models.CharField(max_length=100)
    emergency_contact_cell = models.CharField(max_length=100)
    dr_first_name = models.CharField(max_length=100)
    dr_last_name = models.CharField(max_length=100)
    dr_cell = models.CharField(max_length=100)
    medical_aid = models.CharField(max_length=100)
    medical_aid_num = models.CharField(max_length=100)
    receive_newsletter = models.CharField(max_length=3)
    accept_TandC = models.CharField(max_length=3)

    def __str__(self):
        """Return string representation of the Surfer object."""
        return f"{self.first_name} {self.last_name}"

views.py:

# User + Surfer Create Form
def UserCreate_Surfer(request):
    if request.method == 'POST':
        user_form = UserCreationForm(request.POST)
        surfer_form = SurferForm(request.POST)

        if user_form.is_valid() and surfer_form.is_valid():
            user = user_form.save()
            user.save()

            surfer_form = surfer_form.save(commit=False)
            surfer_form.user = user
             # This will avoid making the user fill in the same data twice
            surfer_form.first_name = user.first_name
            surfer_form.last_name = user.last_name
            surfer_form.email = user.email
            

            surfer_form.save()
            return redirect('roxy:LoginRequest')
    else:
        # Auto setting role
        user_form = UserCreationForm({'role': 'Surfer'})
        surfer_form = SurferForm()

    return render(request, 'surferpages/become-a-surfer.html', {
        'user_form': user_form,
        'surfer_form': surfer_form
    })

form.py

class UserForm(forms.ModelForm):
    password1 = forms.CharField(label='Password', widget=forms.PasswordInput)
    password2 = forms.CharField(label='Password confirmation', widget=forms.PasswordInput)
    class Meta:
        model = User
        fields = (
            'first_name',
            'last_name',
            'email',
            'role'
        )
    

# Surfer form
class SurferForm(forms.ModelForm):
    class Meta:
        model = Surfer
        # specifying which model we are working with
        fields = (
            'age',
            'phone_number',
            'address',
            'country',
            'DOB',
            'gender',
            'race',
            'medical_issues',
            'occupation',
            'school',
            'onset_of_condition',
            'diagnosis_and_needs',
            'medication',
            'extra_info',
            'swim_longer_than_5_min',
            'comfortablity_in_ocean',
            'emergency_contact_first_name',
            'emergency_contact_last_name',
            'emergency_contact_cell',
            'dr_first_name',
            'dr_last_name',
            'dr_cell',
            'medical_aid',
            'medical_aid_num',
            'receive_newsletter',
            'accept_TandC',
            )
django

1条答案

按热度按时间
nbewdwxp

nbewdwxp1#

Django的内置User模型需要username字段，但它不包含在用户创建表单中。
我不知道你是否定制了User型号。无论如何，如果你正在使用Django的开发服务器，你可以在任何可疑的地方放置一个print语句，并检查它在控制台上的输出。

# views.py
def UserCreate_Surfer(request):
    if request == 'POST':
        ..
        if user_form.is_valid() and surfer_form.is_valid():
            ..
        else:
            # If forms are invalid, look into errors. 
            print(user_form.errors)
            print(surfer_form.errors)
     else:
         ..
      return render(..)
赞(0）分享  回复(0）举报  2023-06-25
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com