2011-11-12 31 views
22

私はユーザーが彼の名前と姓を更新できるフォームを持っています。フォームを検証するためにjQuery検証を使用します。ユーザーがスペースを入れたらどうすれば検証できますか?jQuery検証カスタム検証でスペース検証を追加しない

は、ここで私が持っているものです。

<script> 
$(document).ready(function(){ 
    $('#submit').click(function() { 
    var valid = $("#myform").valid(); 
    if(!valid) { 
    return false; 
    } 
    $.ajax({ 
    type: "POST", 
    url: 'save', 
    data: $('#myform').serialize(), 
    dataType: 'json', 
    cache: false, 
    success: function(result) { 
     // redirect to another page 
    } 
    }); 
    }); 
    }); 
</script> 

</head> 
<body> 


<form id="myform" method="post" action=""> 
<fieldset> 
<legend>update name</legend> 
<p> 
<label for="fname">Name</label> 
<em>*</em><input id="fname" name="fname" size="25" class="required" minlength="2" /> 
</p> 
<p> 
<label for="lname">Last Name</label> 
<em>*</em><input id="lname" name="lname" size="25" class="required" minlength="2" /> 
</p> 
<p> 
<input id="submit" type="submit" value="Submit"/> 
</p> 
</fieldset> 
</form> 

おかげ

答えて

31

はあなたのJavaScriptコードのためにこれを使用します。

$(document).ready(function() { 

    jQuery.validator.addMethod("noSpace", function(value, element) { 
    return value.indexOf(" ") < 0 && value != ""; 
    }, "Space are not allowed"); 

    $("#myform").validate({ 
    errorLabelContainer: $("#error"), 
    rules: { 
     fname: { required: true, noSpace: true }, 
     lname: { required: true, noSpace: true } 
    }, 
    messages: { 
     fname: { required: 'Please enter your name' }, 
     lname : { required: "Please enter your last name" } 
    } 
    }); 

    $('#submit').click(function() { 
    var valid = $("#myform").valid(); 
    if(!valid) { 
     return false; 
    } 
    $.ajax({ 
     beforeSend: function() { 
     // display loading message 
     }, 
     type: "POST", 
     url: 'save', 
     data: $('#formdata').serialize(), 
     dataType: 'json', 
     cache: false, 
     success: function(result) { 
     if(result.error) { 
      // show error message 
     } 
     else { 
      // redirect to another page 
     } 
     }, 
     error: function (response, desc, exception) { 
     // show ajax error 
     }, 
     complete: function() { 
     // hide loading message 
     } 
    }); 
    }); 
}); 
関連する問題