Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update forms to better consistency with html5 #305

Merged
merged 4 commits into from
Jul 1, 2024
Merged

update forms to better consistency with html5 #305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9b46667
registration form
meanderfox Feb 3, 2024
e1c43da
Merge branch 'production' into meanderfox/html5-syntax
meanderfox Feb 5, 2024
5688835
Merge branch 'production' into meanderfox/html5-syntax
meanderfox May 31, 2024
628ed31
Merge branch 'production' into meanderfox/html5-syntax
meanderfox Jun 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions registration/templates/registration/registration-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,13 @@ <h1>Pre-Register for {{ event }}!</h1>

{% show_attendee_form event=event emailOptions=True %}

<h3><a name="level"></a>Select your registration options and level.</h3>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This anchor might be in place for jumping to from another part of the form

<h3>Select your registration options and level.</h3>
<hr>
<div class="form-group">
<label for="firstName" class="col-sm-3 control-label">Badge Name <span style="color:red;">*</span></label>
<div class="col-sm-9">
<input type="text" id="badgeName" name="badgeName" placeholder="Your Name Here.."
class="form-control form-control-text" maxlength="25" required="required" autocomplete="nope">
class="form-control form-control-text" maxlength="25" autocomplete="off" required />
</div>
<div class="col-sm-offset-3 help-block with-errors" style=" padding-left:15px;"></div>
</div>
Expand All @@ -71,7 +71,6 @@ <h3><a name="level"></a>Select your registration options and level.</h3>
<hr/>
<div class="container-fluid">
<div class="row" id="levelContainer">
<noscript>Javascript is required for this site.</noscript>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this was on the page twice

<div id="levelContainerAlert" class="alert alert-danger" style="display:none">
<b>No price levels have been set up yet!</b>
If you are the site administrator, you'll need to <a href="{% url 'admin:registration_pricelevel_add' %}">add
Expand All @@ -84,8 +83,8 @@ <h3><a name="level"></a>Select your registration options and level.</h3>
<div class="form-group">
<div class="checkbox col-sm-12">
<label>
<input type="checkbox" id="agreeToRules" name="agreeToRules" class="form-control form-control-checkbox"
required data-error="You must agree to the code of conduct to register." />
<input class="form-control form-control-checkbox" data-error="You must agree to the code of conduct to register." id="agreeToRules" name="agreeToRules"
required type="checkbox"/>
I agree to abide by the {{ event.name }} <a href="{{ event.codeOfConduct }}" target="_blank">Code of
Conduct</a>. By registering for {{ event }} you attest that you are not listed on any sexual offender
registry.
Expand All @@ -94,7 +93,7 @@ <h3><a name="level"></a>Select your registration options and level.</h3>
<div class="col-sm-offset-3 help-block with-errors" style=" padding-left:15px;"></div>
</div>
<div class="container-fluid">
<button type="submit" class="btn btn-primary col-sm-6 pull-right" id="register">Register</button> &nbsp;
<button class="btn btn-primary col-sm-6 pull-right" id="register" type="submit">Register</button> &nbsp;
</div>
</div>
</div>
Expand Down
44 changes: 28 additions & 16 deletions registration/templates/templatetags/basic_attendee_form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,30 @@
<div class="form-group">
<label for="firstName" class="col-sm-3 control-label">Full (Legal) Name <span style="color:red;">*</span></label>
<div class="col-sm-4">
<input type="text" id="firstName" value="{{attendee.firstName}}" placeholder="Legal First Name" class="form-control" autofocus required="required" data-error="First name is required. ">
<input autocomplete="given-name" autofocus class="form-control" data-error="First name is required"
id="firstName" placeholder="Legal First Name" required type="text" value="{{attendee.firstName}}"/>
</div>
<div class="col-sm-5">
<input type="text" id="lastName" value="{{attendee.lastName}}" placeholder="Last Name" class="form-control" autofocus required="required" data-error="Last name is required.">
<input autocomplete="family-name" class="form-control" data-error="Last name is required" id="lastName" placeholder="Last Name"
required type="text" value="{{attendee.lastName}}"/>
</div>
<div class="col-sm-offset-3 help-block with-errors" style="padding-left:15px;"></div>
</div>

<div class="form-group">
<label for="preferredName" class="col-sm-3 control-label">Preferred First Name</label>
<div class="col-sm-4">
<input type="text" id="preferredName" value="{{attendee.preferredName}}" placeholder="Preferred First Name" class="form-control">
<input autocomplete="off" class="form-control" id="preferredName" placeholder="Preferred First Name"
type="text" value="{{attendee.preferredName}}"/>
</div>
<div class="col-sm-offset-3 help-block with-errors" style="padding-left:15px;"></div>
</div>

<div class="form-group">
<label for="email" class="col-sm-3 control-label">Email <span style="color:red;">*</span></label>
<div class="col-sm-9">
<input type="email" id="email" value="{{attendee.email}}" placeholder="Email" class="form-control" required="required" data-error="Email is required." />
<input autocomplete="email" class="form-control" data-error="Email is required" id="email" placeholder="Email" required
type="email" value="{{attendee.email}}"/>
</div>
<div class="col-sm-offset-3 help-block with-errors"style=" padding-left:15px;"></div>
</div>
Expand All @@ -32,10 +36,10 @@
<label class="col-sm-3">&nbsp;</label>
<div class="col-sm-9">
<label>
<input type="checkbox" id="contact"> <span class="control-label" >Please keep me up to date with convention related information.</span>
<input id="contact" type="checkbox"/><span class="control-label">Please keep me up to date with convention related information.</span>
</label>
<label>
<input type="checkbox" id="survey"> <span class="control-label" >Please send me the post-con survey.</span>
<input id="survey" type="checkbox"/><span class="control-label">Please send me the post-con survey.</span>
</label>
</div>
</div>
Expand All @@ -44,7 +48,8 @@
<div class="form-group">
<label for="phone" class="col-sm-3 control-label">Phone Number <span style="color:red;">*</span></label>
<div class="col-sm-9">
<input type="tel" id="phone" value="{{attendee.phone}}" placeholder="Phone Number" class="form-control" required data-error="Phone number is required.">
<input autocomplete="tel" class="form-control" data-error="Phone number is required" id="phone" placeholder="Phone Number" required
type="tel" value="{{attendee.phone}}"/>
</div>
<div class="col-sm-offset-3 help-block with-errors"style=" padding-left:15px;"></div>
</div>
Expand All @@ -53,37 +58,44 @@
<div class="form-group">
<label for="add1" class="col-sm-3 control-label">Address <span style="color:red;">*</span></label>
<div class="col-sm-9">
<input type="text" name="add1" id="add1" value="{{attendee.address1}}" placeholder="Address Line 1" class="form-control" required data-error="Address is required.">
<input autocomplete="address-line1" class="form-control" data-error="Address is required" id="add1" name="add1"
placeholder="Address Line 1" required type="text" value="{{attendee.address1}}"/>
</div>
<div class="col-sm-offset-3 help-block with-errors"style=" padding-left:15px;"></div>
</div>

<div class="form-group">
<label for="add2" class="col-sm-3 control-label">&nbsp;</label>
<div class="col-sm-9">
<input type="text" name="add2" id="add2" value="{{attendee.address2}}" placeholder="Address Line 2" class="form-control">
<input autocomplete="address-line2" class="form-control" id="add2" name="add2" placeholder="Address Line 2"
type="text" value="{{attendee.address2}}"/>
</div>
<div class="col-sm-offset-3 help-block with-errors"style=" padding-left:15px;"></div>
</div>

<div class="form-group">
<label for="city" class="col-sm-3 control-label">City/State <span style="color:red;">*</span></label>
<div class="col-sm-4">
<input type="text" name="city" id="city" value="{{attendee.city}}" placeholder="City" class="form-control" required data-error="City is required. ">
<input autocomplete="address-level2" class="form-control" data-error="City is required" id="city" name="city" placeholder="City"
required type="text" value="{{attendee.city}}"/>
</div>
<div class="col-sm-5">
<select class="form-control bfh-states" id="state" data-country="country" data-state="VA" name="state"></select>
<select autocomplete="address-level3" class="form-control bfh-states" data-country="country" data-state="VA" id="state"
name="state" required></select>
</div>
<div class="col-sm-offset-3 help-block with-errors" style="padding-left:15px;"></div>
</div>

<div class="form-group">
<label for="country" class="col-sm-3 control-label">ZIP/Country <span style="color:red;">*</span></label>
<div class="col-sm-3">
<input type="text" name="zip" id="zip" value="{{attendee.postalCode}}" placeholder="ZIP Code" class="form-control" data-minlength="1" data-error="Zip code is required.">
<input autocomplete="postal-code" class="form-control" data-error="Zip code is required" data-minlength="1" id="zip"
name="zip" placeholder="ZIP Code" required type="text"
value="{{attendee.postalCode}}"/>
</div>
<div class="col-sm-6">
<select id="country" class="form-control bfh-countries" data-country="US" name="country"></select>
<select autocomplete="country" class="form-control bfh-countries" data-country="US" id="country" name="country"
required></select>
</div>
<div class="col-sm-offset-3 help-block with-errors" style="padding-left:15px;"></div>
</div>
Expand All @@ -101,11 +113,11 @@
<label for="birthDate" class="col-sm-3 control-label">Date of Birth <span style="color:red;">*</span></label>
<div class="col-sm-9">
<div class="col-sm-3">
<input type="number" name="byear" id="byear" class="form-control" placeholder="Year" value="{{attendee.birthdate|date:"Y"}}" max="{% now "Y" %}" min="1900" maxlength="4" required>
<input type="number" name="byear" id="byear" class="form-control" placeholder="Year" value="{{attendee.birthdate|date:"Y"}}" max="{% now "Y" %}" min="1900" maxlength="4" required autocomplete="bday-year" />
</div>

<div class="col-sm-5">
<select id="bmonth" name="bmonth" class="form-control" required>
<select autocomplete="bday-month" class="form-control" id="bmonth" name="bmonth" required>
Copy link
Member

@rechner rechner Feb 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally, I don't like to alphabetize properties like this. The previous ordering places the properties most pertinent to DOM manipulation first, making it a little easier to read at a glance.

<option value="">Month</option>
<option value="01" {% selected_if_month attendee.birthdate 1 %}>January</option>
<option value="02" {% selected_if_month attendee.birthdate 2 %}>February</option>
Expand All @@ -123,7 +135,7 @@
</div>

<div class="col-sm-3">
<select id="bday" name="bday" class="form-control" required disabled>
<select autocomplete="bday-day" class="form-control" disabled id="bday" name="bday" required>
<option value="">Day</option>
{% if attendee.birthdate %}
<option value="{{attendee.birthdate|date:"d"}}" selected>{{attendee.birthdate|date:"d"}}</option>
Expand Down
Loading