Question

我有2个输入字段用于收集User Choice的任何1个输入。提交后，如果用户在两个字段上输入数据，那将是错误的。如果两个字段上的数据都不为假。我知道datastring，url，Ajax，POST - 但我在验证输入字段时失败了。

从我的实验开始，这个给定的代码是在POST或GET方法上发送数据的两个字段（即使我输入两个不同的值，它只发送两个字段参数的NAME字段数据作为相同的值

请查看此Fiddle以完全理解我的问题。

$(document).ready(function {
$("#search").click(function({ 
    // checking whether Field is " EMPTY or NOT " by assigning valid class to it 

    $('#fname').on('input', function() {
        var input=$(this);
        var is_name=input.val();
        if(is_name){input.removeClass("invalid").addClass("valid");}
        else{input.removeClass("valid").addClass("invalid");}
    });

    // checking whether Field is "EMPTY or NOT " assigning valid class to it

    $('#fnumber').on('input', function() {
        var input=$(this);
        var is_number=input.val();
        if(is_number){input.removeClass("invalid").addClass("valid");}
        else{input.removeClass("valid").addClass("invalid");}
    });

    //checking whether user touched two fields ..

     if( $is_number.hasClass("valid") && $is_name.hasClass("valid") ) { 
               $("result").hide();
               $("error").show();
               $("wrong").hide();
        }
    //checking whether user Not touched two fields ..

    else if ( $is_number.hasClass("invalid") && $is_name.hasClass("invalid") ) {
            $("result").hide();
            $("error").hide();
            $("wrong").show();
        }
    // if user Touched only one field .... checking which one he/she is touched ...

    else {
        if(is_number.hasClass("valid") ) {
               $("result").show();
               $("error").hide();
               $("wrong").hide();
            $('#is_number').html('is_number');
        }
        else {
               $("result").show();
               $("error").hide();
               $("wrong").hide();
             $('#is_name').html('is_name');
        }
     }
 });
 $("result").hide();
 $("error").hide();
 $("wrong").show();

}）;

HTML代码

<form name="form" id="contact" method="post">
  <p> Number: &nbsp; <input type="text" id="form_number" size="15" name="fnumber"></input> </p>
   <p> Name: &nbsp; <input type="text" id="form_name" size="25" name="fname"></input> </p>              
   <input type="submit" name="search"/>
 </form> <br> <br>
<p id="result"> User Entered Value :-<span id="nam_value"> </span> <span id="num_value"> </span> </p>
<p id="error"> Use only One field to enter data </p>
<p id="wrong"> Enter any Information </p>

Answer 1

好的，这里有很多问题，我已经在这里做了大约30分钟，而且我还没有找到所有的东西。

这是我去过的地方：http://jsfiddle.net/4j4y2rq3/4/

首先你缺少括号。

$(document).ready(function {
  $("#search").click(function({

我把它们放在我的小提琴里。

然后我修复了验证中调用的元素id以匹配输入字段。我剪切了一些无用的代码，并将if语句中的一些调用替换为元素，而不是输入的文本值。（即你不能这样做$（'输入'）。val（）。hasClass（“valid”））

仍然需要进行一些修复：

在底部附近你有一堆代码，比如$("result").show();这就是调用像<result>这样的标签，你需要创建一个带有id或类名为result的元素，然后让它看起来像这样{ {1}}或$('.result')

您还需要在发布之前触发验证。如果您在提交/＃搜索中触发表单提交的验证，帖子将覆盖您的所有javascript。

成功提交时，jquery 2输入字段验证和POST 1值

1 个答案: