如何让Wix网站iFrame中的HTML表单仅接受拉丁字母输入？

Got it, let's get your form sorted so it only accepts Latin characters. The issue with some online code might be that it either didn't target all the right fields or lacked real-time validation (since HTML's native pattern only checks on submit). Here's a two-pronged approach that works reliably in your Wix iframe:

1. Add HTML Native Validation (Submit-Time Check) #

First, we'll add the pattern attribute to all text fields that need restriction. This ensures the form can't be submitted with non-Latin characters, and shows a user-friendly message when they try.

We'll use the regex ^[A-Za-z\s'-]+$ — this allows:

• Uppercase/lowercase Latin letters
• Spaces (for names like "Mary Ann")
• Apostrophes (for "O'Connor")
• Hyphens (for "Smith-Jones")

For fields like school/university or course names, we'll tweak the regex to include basic punctuation (., ,) since those fields often need them.

2. Add Real-Time JavaScript Validation (Prevent Invalid Keystrokes) #

To stop users from typing non-Latin characters altogether (instead of just blocking on submit), we'll add a small JavaScript snippet that listens for keypress events and rejects invalid input immediately.

Modified Form Code #

Here's your updated form with both validation methods included:

<font face="helvetica">
<META HTTPS-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<form action="https://example.example.com/servlet/servlet.example?encoding=UTF-8" method="POST" target='_parent'>
  <input type=hidden name="oid" value="00D0Y0000034cvq">
  <input type=hidden name="retURL" value="https://example.com/successful-registration">

  <label for="first_name">First Name</label> &nbsp;&nbsp;
  <input id="first_name" maxlength="40" name="first_name" size="20" type="text" 
         pattern="^[A-Za-z\s'-]+$" title="Please enter only Latin letters, spaces, apostrophes, or hyphens" required=true/><br><br>

  <label for="middle_name">Middle Name</label>&nbsp;&nbsp;
  <input id="middle_name" maxlength="80" name="middle_name" size="20" type="text"
         pattern="^[A-Za-z\s'-]+$" title="Please enter only Latin letters, spaces, apostrophes, or hyphens" /><br><br>

  <label for="last_name">Last Name</label>&nbsp;&nbsp;
  <input id="last_name" maxlength="80" name="last_name" size="20" type="text"
         pattern="^[A-Za-z\s'-]+$" title="Please enter only Latin letters, spaces, apostrophes, or hyphens" required=true /><br><br>

  Date of Birth:&nbsp;&nbsp;<span class="dateInput dateOnlyInput">
  <input id="00N0Y00000RWiNa" name="00N0Y00000RWiNa" size="12" type="text" placeholder=" DD/MM/YYY" /></span><br><br>

  <label for="city">City</label>&nbsp;&nbsp;
  <input id="city" maxlength="40" name="city" size="20" type="text"
         pattern="^[A-Za-z\s'-]+$" title="Please enter only Latin letters, spaces, apostrophes, or hyphens" /><br><br>

  <label for="country_code">Country</label> &nbsp;&nbsp;
  <select id="country_code" name="country_code">
    <option value="">--None--</option>
    <option value="BH">Bahrain</option>
    <option value="EG">Egypt</option>
    <option value="JO">Jordan</option>
    <option value="KW">Kuwait</option>
    <option value="LB">Lebanon</option>
    <option value="MA">Morocco</option>
    <option value="OM">Oman</option>
    <option value="OTHER">Other</option>
    <option value="QA">Qatar</option>
    <option value="SA">Saudi Arabia</option>
    <option value="SY">Syria</option>
    <option value="AE">United Arab Emirates</option>
    <option value="GB">United Kingdom</option>
  </select><br><br>

  <label for="mobile">Mobile</label> &nbsp;&nbsp;
  <input id="mobile" maxlength="40" name="mobile" size="20" type="text" required=true/><br><br>

  <label for="email">Email</label>&nbsp;&nbsp;
  <input id="email" pattern="[^ @]*@[^ @]*" maxlength="80" name="email" size="20" type="text" required=true /><br><br>

  Current/Previous School/University:&nbsp; &nbsp;
  <input id="00N0Y00000RWiNZ" maxlength="100" name="00N0Y00000RWiNZ" size="20" type="text"
         pattern="^[A-Za-z\s'-.,]+$" title="Please enter only Latin letters, spaces, and basic punctuation" /><br><br>

  Course you would like to study: &nbsp;&nbsp;
  <input id="00N0Y00000RWiNi" maxlength="255" name="00N0Y00000RWiNi" size="20" type="text"
         pattern="^[A-Za-z\s'-.,]+$" title="Please enter only Latin letters, spaces, and basic punctuation" /><br><br>

  <label for="lead_source">Where did you hear about us?</label> &nbsp;&nbsp;
  <select id="lead_source" name="lead_source">
    <option value="">--None--</option>
    <option value="Instagram">Instagram</option>
    <option value="Facebook">Facebook</option>
    <option value="Twitter">Twitter</option>
    <option value="Google">Google</option>
    <option value="School Counsellor_(Please specify)">School Counsellor_(Please specify)</option>
    <option value="University Website_(Please specify)">University Website_(Please specify)</option>
    <option value="Web">Web</option>
  </select><br><br>

  <input type=hidden id="00N0Y00000RWvPA" name="00N0Y00000RWvPA" value="1" />
  <center><input type="submit" name="submit"></center>
</form>

<script>
// Restrict keystrokes to Latin characters and allowed punctuation
const restrictedFields = document.querySelectorAll('#first_name, #middle_name, #last_name, #city, #00N0Y00000RWiNZ, #00N0Y00000RWiNi');

restrictedFields.forEach(field => {
  field.addEventListener('keypress', function(e) {
    const charCode = e.which || e.keyCode;
    // Allow Latin letters, spaces, apostrophes, hyphens, periods, commas
    const allowedChars = /[A-Za-z\s'-.,]/;
    const inputChar = String.fromCharCode(charCode);
    
    // Let backspace pass through for corrections
    if (!allowedChars.test(inputChar) && charCode !== 8) {
      e.preventDefault();
    }
  });

  // Also block pasting non-Latin text
  field.addEventListener('paste', function(e) {
    const pastedText = e.clipboardData.getData('text');
    const allowedChars = /^[A-Za-z\s'-.,]*$/;
    if (!allowedChars.test(pastedText)) {
      e.preventDefault();
    }
  });
});
</script>
</font>

Key Details: #

• I added a paste event listener to block non-Latin text that users might copy-paste into the fields.
• Mobile and email fields are excluded from restrictions since they need numbers or special characters (like @).
• The title attribute gives clear feedback when users try to submit invalid input, and the JavaScript stops invalid characters from being entered at all.

How to Use in Wix #

Just replace your existing iframe HTML code with this modified version. It's self-contained (no external dependencies) so it should work seamlessly in your Wix iframe.

内容的提问来源于stack exchange，提问作者James Ellis