如何通过jQuery Form Validator验证街道字段必须为建议列表中的值

Hey there! Let's fix this up for you. First, let's clean up the syntax error in your code (you had a duplicate var streets = var streets line) and then add the custom validation you need—all using the jQuery Form Validator plugin itself, no AJAX required.

Step 1: Fix Syntax & Simplify Suggestion Code #

Your current code has a redundant array copy (looping through streets to push into array is unnecessary) plus a syntax error. Let's simplify that first:

// Initialize the validator
$(function() { 
  $.validate(); 
});

// Your street list
var streets = ["ABACOWEG", "ABATTOIRWEG", "ADMIRAALSWEG"];

// Attach suggestions (simplified—no need for extra array)
if ($("input[name='street']").length) {
  $.formUtils.suggest($("input[name='street']"), streets);
}

Step 2: Add Custom Validation Rule #

The plugin lets you define custom validation rules using $.formUtils.addValidator(). We'll create a rule that checks if the input value exists in your streets array:

// Add custom validator for street names
$.formUtils.addValidator({
  name: "validStreet",
  validatorFunction: function(value, $el, config, language, $form) {
    // Case-insensitive check (adjust to value.includes(value) for strict case matching)
    return streets.includes(value.toUpperCase());
  },
  errorMessage: "Please enter a valid street name from the suggestions",
  errorMessageKey: "invalidStreet"
});

Step 3: Update Your Form Field #

Modify the street input to use this new validation rule, keeping your existing length validation:

<input 
  id="field_1851" 
  class="form-control" 
  type="text" 
  name="street" 
  value="" 
  data-validation="length validStreet" 
  data-validation-length="min5" 
  data-suggestions=""
>

Full Working Code #

Putting it all together, here's the complete setup:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.79/jquery.form-validator.min.js" integrity="sha256-H7bYoAw738qgns17P+7wWt77AfnEh7yCJMQGUCNcxQA=" crossorigin="anonymous"></script>

<input 
  id="field_1851" 
  class="form-control" 
  type="text" 
  name="street" 
  value="" 
  data-validation="length validStreet" 
  data-validation-length="min5" 
  data-suggestions=""
>

<script>
$(function() { 
  $.validate(); 
});

var streets = ["ABACOWEG", "ABATTOIRWEG", "ADMIRAALSWEG"];

// Add custom street validation
$.formUtils.addValidator({
  name: "validStreet",
  validatorFunction: function(value) {
    return streets.includes(value.toUpperCase());
  },
  errorMessage: "Please select a valid street name from the suggestions list",
  errorMessageKey: "invalidStreet"
});

// Attach suggestions
if ($("input[name='street']").length) {
  $.formUtils.suggest($("input[name='street']"), streets);
}
</script>

Key Notes #

• The validation is case-insensitive (using toUpperCase()) so users don't have to match the exact case of your street names—remove this if you need strict case matching.
• The custom validator integrates seamlessly with the plugin's existing flow, triggering alongside your length check when the user submits the form (or as they type, depending on your plugin settings).
• We removed the redundant array copy since $.formUtils.suggest() accepts your original streets array directly.

内容的提问来源于stack exchange，提问作者Alvin Bakker