jquery - 如何在输入中禁用发送和显示消息以完成

Question

如何使用 jQuery 显示表单消息并禁用表单提交？

我想在文本输入字段上显示带有 jQ​​uery 的表单消息，这些字段需要在填写字段之前提交和禁用提交按钮。

我的简单问题是这样的：

如果输入字段为空并禁用提交按钮，我想显示错误消息。如果输入字段为空，我想在输入字段附近显示消息，该字段为空且需要填写。

我试过了

$("#CustomerForm").validate({
  rules: {
    FirstNameEdit: { required: true },
    LastNameEdit: { required: true },
    EmailEdit: { required: true, email:true }
  }
});

但它不起作用。

头

<script type="text/javascript">
$.fx.speeds._default = 650;
$(function() {
  $('.massgejava').dialog({
    autoOpen: false,
    show: 'explode',
    hide: 'explode',
    title: 'راسلنا',
    width: 380
  });
  $('#javamassge').click(function() {
    $(".massgejava").dialog('open');
    return false;
  });
  $('input#registerjquery').click(function() {
    $(".massgejava").dialog("close");
  });
});
</script>

身体

<form action="form.php" method="post">
  <input name="name" 
         type="text" 
         value="اسمك الكريم" 
         onblur="if (this.value == '') this.value = 'اسمك الكريم'" 
         onclick="value=''" />
  <input name="email" 
         type="text" 
         value="البريد الالكتروني" />
  <input name="phone" 
         type="text" 
         value="رقم الهاتف" 
         onblur="if (this.value == '') this.value = 'رقم الهاتف'" 
         onclick="value=''" />
  <textarea name="msg" 
            cols="41" 
            rows="5" 
            placeholder = "نص الرساله" 
            wrap="soft"></textarea>
  <input type="submit" value="ارسال" />
</form>

建议？

Answer 1

带有一些添加 ID 的表单：

<form action="form.php" method="post" id="CustomerForm">
    <input name="name" type="text" value="اسمك الكريم" onblur="if (this.value=='')this.value='اسمك الكريم'" onclick="value=''" />
    <br />
    <input name="email" type="text" value="البريد الالكتروني" />
    <br />
    <input name="phone" type="text" value="رقم الهاتف" onblur="if (this.value=='')this.value='رقم الهاتف'" onclick="value=''" />
    <br />
    <textarea name="msg" id="msg" cols="41" rows="5" placeholder="نص الرساله" wrap=soft></textarea>
    <br />
    <input type="submit" id="submit" value="ارسال" />
</form>

查询：

function kontrolaMailu(emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
}

function checkName(name){
var pattern = new RegExp(/^([a-z]+) ([a-z]+)$/);
return pattern.test(name);
}

function formControl(){
var error=0;
var errorTXT='';
var inputs = $("#CustomerForm input ");
$.each(inputs, function(key, value) {
    if(value["name"]=='name'){
        if(value['value']!='' && error==0){
            if(checkName(value['value'])){
                error=0;
                }
                else{
                    error=1;
                    errorTXT='your error msg text for name input when there arent two words';
                    return false;
                }
        }
        else{
            error=1;
            errorTXT='your error msg text for empty name field';
            return false;
            }
        }
     if(value["name"]=='email'){
        if(value['value']!='' && error==0){
            if(kontrolaMailu(value['value'])){
                error=0;
                }
                else{
                    error=1;
                    errorTXT='your error msg text for wrong mail format';
                    return false;
                }

        }
        else{
            error=1;
            errorTXT='your error msg text for empty mail';
            return false;
            }
        }
}

     if(error != 0){
      $('#submit').attr('title',errorTXT);
      $('#submit').attr('disabled', 'disabled');
      $('#submit').addClass('disabled');//css class for disabled button
      $('#msg').val(errorTXT);
     }
     else{
      $('#submit').removeAttr('title');
      $('#submit').removeAttr('disabled');
      $('#submit').removeClass('disabled');//css class for disabled button
      $('#msg').val('');
     }
}

如果像 value='اسمك الكريم' 这样的值会通过那些 RegExps，我不放心，因为我从来不需要使用不同的字符集使用语言