Odoo HTML表单构建器：下拉框必填验证及输入框正则校验问题

Hey there! Let's break down your two form validation problems and fix them step by step:

Right now, your dropdown doesn't have a required attribute, so browsers won't block form submission if the user leaves the default "Select option" selected. Here's how to fix it:

First, add the required attribute to your <select> tag. Since your default option has an empty value and is disabled, browsers will recognize that selecting it doesn't count as a valid choice:

<select class="form-control" required>
  <option value="" selected disabled>Select option</option>
  <option value="course 1">course 1</option>
  <option value="course 2">course 2</option>
  <option value="course 3">course 3</option>
</select>

This will trigger the browser's default error message when the user tries to submit without selecting a course. If you want a custom error message instead of the generic one, add a bit of JavaScript to handle the validation:

const courseDropdown = document.querySelector('.form-control');

// Show custom error when invalid
courseDropdown.addEventListener('invalid', (e) => {
  e.preventDefault();
  courseDropdown.setCustomValidity('Please pick a valid course option');
});

// Clear error when user makes a selection
courseDropdown.addEventListener('input', () => {
  courseDropdown.setCustomValidity('');
});

The issue with your pattern attribute not working likely comes from either an incorrect regex pattern, missing context for the browser to trigger validation, or Odoo's template rendering interfering slightly. Let's fix this:

First, update your input tag with the correct regex pattern (to enforce 10-30 uppercase/lowercase letters only) and add a title attribute to clarify the rule for users:

<div class="form-group field-x_street_name_1">
  <label for="x_street_name_1" class="col-sm-2 col-form-label col-form-label-lg">Street 1 <span style="color:red;">*</span></label>
  <div class="col-sm-10">
    <input type="text" 
           name="x_street_name_1" 
           t-att-value="x_street_name_1" 
           id="x_street_name_1" 
           class="form-control form-control-lg" 
           placeholder="e.g. John Lane" 
           required="required"
           pattern="^[A-Za-z]{10,30}$"
           title="Please enter 10-30 uppercase or lowercase letters only"
           t-att-readonly="'readonly' if only_passwords else None" 
           t-att-autofocus="'autofocus' if login and not only_passwords else None"/>
  </div>
</div>

Key notes here: #

• The pattern="^[A-Za-z]{10,30}$" regex ensures:
  • ^ = start of the input
  • [A-Za-z] = only uppercase or lowercase letters
  • {10,30} = length between 10 and 30 characters
  • $ = end of the input (prevents extra non-letter characters)
• The title attribute tells the browser what to display in the error message, making it clear to users what's required.

If the HTML5 pattern still doesn't trigger (sometimes Odoo's form handling can override default behavior), add a JavaScript fallback to manually validate the input:

const streetInput = document.getElementById('x_street_name_1');
const streetRegex = /^[A-Za-z]{10,30}$/;

streetInput.addEventListener('input', () => {
  if (!streetRegex.test(streetInput.value)) {
    streetInput.setCustomValidity('Please enter 10-30 uppercase or lowercase letters only');
  } else {
    streetInput.setCustomValidity('');
  }
});

// Also validate on form submit to be safe
document.querySelector('form').addEventListener('submit', (e) => {
  if (!streetRegex.test(streetInput.value)) {
    e.preventDefault();
    streetInput.setCustomValidity('Please enter 10-30 uppercase or lowercase letters only');
    streetInput.reportValidity(); // Show the error message
  }
});

This fallback ensures the validation works even if Odoo's default form processing interferes with HTML5's built-in validation.

内容的提问来源于stack exchange，提问作者Mingg Lex