2016-07-15 57 views
0

需要你的帮助。FormValidation:在邮件中显示占位符属性

我正在使用FormValidation验证输入的形式。 我还创建了一个名为FormValidation的js文件。

$(document).ready(function(){ 
 
    $().DMSFormValidator('#frmAccessDetails'); 
 
}); 
 

 
(function() { 
 
$.fn.DMSFormValidator = function (FormNameID, ErrorContainerID) { 
 
    var $form = $(FormNameID); 
 
    
 
    $form.formValidation({ 
 
    framework: 'bootstrap', 
 
    err: { 
 
    container: (ErrorContainerID == null || ErrorContainerID.length == 0) ? null : ErrorContainerID 
 
    }, 
 
    icon: { 
 
    valid: 'glyphicon glyphicon-ok', 
 
    invalid: 'glyphicon glyphicon-remove', 
 
    validating: 'glyphicon glyphicon-refresh' 
 
    }, 
 
    fields: { 
 
    txtNetworkID: { 
 
    message: 'The network ID is not valid', 
 
    validators: { 
 
     notEmpty: { 
 
     message: 'The network ID is required' 
 
     }, 
 
     stringLength: { 
 
     min: 7, 
 
     max: 30, 
 
     message: 'The network ID must be more than 7 and less than 30 characters long' 
 
     }, 
 
     regexp: { 
 
     regexp: /^[a-zA-Z0-9_\.]+$/, 
 
     message: 'The network ID can only consist of alphabetical, number, dot and underscore' 
 
     } 
 
    } 
 
    }, 
 
    txtEmail: { 
 
    validators: { 
 
     notEmpty: { 
 
     message: 'The email address is required' 
 
     }, 
 
     emailAddress: { 
 
     message: 'The input is not a valid email address' 
 
     } 
 
    } 
 
    }, 
 
    txtPassword: { 
 
    validators: { 
 
     notEmpty: { 
 
     message: 'The password is required' 
 
     } 
 
    } 
 
    },  
 
    TextRequiredField: { 
 
    selector: '.TextRequiredField', 
 
    validators: { 
 
     notEmpty: { 
 
     message: ($('.TextRequiredField').prop('placeholder')) + ' field is required' 
 
     }, 
 
     regexp: { 
 
     regexp: /^[a-zA-Z0-9_\. ]+$/, 
 
     message: 'The accepts only consist of alphabetical, number, dot, underscore and space' 
 
     } 
 
    } 
 
    } 
 
    } 
 
    }); 
 
    return $form; 
 
} 
 
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<script src="http://formvalidation.io/bundles/40aab700698a291c5ce712a44ec8bc34.js"></script> 
 

 
<div class="col-lg-5 col-lg-offset-3"> 
 
<form id="frmAccessDetails"> 
 
    <div class="panel panel-primary"> 
 
    <div class="panel-heading">Add New Access</div> 
 
    <div class="panel-body"> 
 
    
 
    <div class="row"> 
 
    <div class="col-lg-12"> 
 
     <div class="form-group"> 
 
     <label>Access Name</label> 
 
     <input type="text" class="form-control TextRequiredField" id="txtAccessName" name="txtxAccessGroupName" placeholder="Access Group Name" /> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label>Description</label> 
 
     <input type="text" class="form-control TextRequiredField" id="txtDescription" name="txtDescription" placeholder="Description" /> 
 
     </div> 
 
     
 
    
 

 
    </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel-footer"> 
 
    <div class="row"> 
 
    <div class="col-lg-12"> 
 
     <div class="form-inline pull-right"> 
 
     <div class="form-group"> 
 
     <div class="input-group"> 
 
     <button type="submit" id="btnSave" name="btnSave" class="btn btn-success"><i class="glyphicon glyphicon-floppy-disk"></i> Save</button> 
 
     </div> 
 
     <div class="input-group"> 
 
     <button type="button" onclick="javascript: window.location='@Url.Action("Index", "Access")'" id="btnSave" name="btnSave" class="btn btn-danger"><i class="glyphicon glyphicon-floppy-remove"></i> Cancel</button> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</form> 
 
</div>

看一看片段。我为所有文本字段使用单个验证。但是,我想使用占位符来显示。我如何访问控件,它是占位符?看起来像它是一个数组,它是第一个元素。

回答

0
$(document).ready(function() { 

$('#contact-form').validate({ 
    rules: { 
     name: { 
      minlength: 2, 
      required: true 
     }, 
     email: { 
      required: true, 
      email: true 
     }, 
     message: { 
      minlength: 2, 
      required: true 
     } 
    }, 
    highlight: function (element) { 
     $(element).closest('.control-group').removeClass('success').addClass('error'); 
    }, 
    success: function (element) { 
     element.text('OK!').addClass('valid') 
      .closest('.control-group').removeClass('error').addClass('success'); 
    } 
}); 

});

check here

+0

嗨,先生,谢谢你的评论。不过,我正在使用FormValidations。 –