Question

我正在尝试在this demo使用自定义验证功能，但它无效！这是我的代码：

$(function () {
     function selectInput(elem) {
         inputData = $.trim(elem.val());
         if (inputData == "na") {
             $('error').html('Please Select From The List');
         } else {
             return inputData;
         }
     }
     $("#pro").on("click", function (e) {

         if (selectInput($('#uselect'))) {
             alert('Correct Selection');
         } 
         else{console.log("There is an Error! But Where?!")}
         e.preventDefault();
     });
 });

和HTML

<form>
    <select id="#uselect">
        <option value="na">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
  <input type="submit" value="Submit" id="pro" />
</form>
<div id="error"></div>

请您查看Demo并告诉我如何修复它？

由于

Answer 1

查看您选择的ID

<select id="#uselect">

它中有一个#。

Answer 2

在

中放松＃

<select id="#uselect">

使用

<select id="uselect">

Answer 3

摆脱#标记中的select：

<select id="uselect">

作为旁注，如果可能，您不应使用全局变量，因此请更改：

inputData = $.trim(elem.val());

到

var inputData = $.trim(elem.val());

Answer 4

首先你的id中有“＃”，所以要管理

那么你将得到1 ot 2作为值而不是

   value="1" 
   value="2"

如果没有选择，那么你会得到“na”

Answer 5

我通过从DOM-Ready事件中移除函数实现来阻止它，如此......

 //DOM-Ready Event Listner
 $(function () {
     $("#pro").on("click", function (e) {
         if (selectInput($('#uselect'))) {
             alert('Correct Selection');
         } else {
             console.log("There is an Error! But Where?! Bahh"); //<--Added a ';'
         }
         e.preventDefault();
     });
 });

 //Separated Implementation
 function selectInput(elem) {
     inputData = $.trim(elem.val());
     if (inputData == "na") {
         $('error').html('Please Select From The List');
     } else {
         return inputData;
     }
 }

Answer 6

Working Demo jsFiddle

你错过了一个角色：添加一个＆＃34;＃＆＃34;在：

$('error').html();

像这样：

$('#error').html();

并删除＆＃34;＃＆＃34;在：

<select id="#uselect">

像这样：

<select id="uselect">

通过jQuery自定义函数验证选择选项列表的问题

6 个答案: