modal.html

<script>
$(document).ready(function(){
        $.get("config.xml", function(data){
                $('#userVO').append("<option></option>");
                $(data).find('VO').each(function () {
                        $('#userVO').append($("<option></option>").text($(this).text()));
                });
        });
});

jQuery.validator.addMethod("checkCert", function (value, element) {
    return value.substring(0,31)=="-----BEGIN RSA PRIVATE KEY-----";
}, "The private key must start with -----BEGIN RSA PRIVATE KEY-----");
$(function(event) {											
	 $('#pinfo-form').validate(
	  {
	  rules: {
	    pemPkey: {
	      minlength: 256,
	      required: true,
	      checkCert: true
	    }
	  },
	  highlight: function(element) {
	    $(element).closest('.control-group').addClass('has-error');
	  },
      unhighlight: function(element) {
        $(element).closest('.control-group').removeClass('has-error');
      },
	  success: function(element) {
	    element.text('OK!').addClass('valid').closest('.control-group').removeClass('has-error');
	  }											 
	 });
}); 

$("#pinfo-form").submit(function(event){
	  event.preventDefault();	
	  if ($("#pinfo-form").valid()){
		$("#delegating-indicator").show(); 	
		doDelegate($("#delegation_id").val(), $("#pemPkey").val(),
				$("#userDN").val(), $("#clientCERT").val(), $("#userVO").val());		
		$("#pemPkey").val("");
		$("#userVO").val("");    
	  }	
	  return false;
});

$( "#delegateButton" ).click(function() {
	$( "#pinfo-form" ).submit();
});
		
$('#popoverDelegate').popover();

//To prevent the modal window to be closed by pressing ESC or clicking outside
$('#delegationModal').modal({
 	  show: false,	
 	  backdrop: 'static',
 	  keyboard: false
 });
	
	//To do the validation of the form even on paste
$("#pemPkey").bind('input propertychange', function(){
	$("#pinfo-form").valid();
});	
</script>
<div class="modal fade" id="delegationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
	<div class="modal-dialog">
		<div class="modal-content">
			<form action="" id="pinfo-form" name="pinfo-form"
				class="form-horizontal" method="post">
				<div class="modal-body">
					<h4 class="modal-title" >
						Credentials delegation <a id="popoverDelegate" class="btn" href="#"
								data-content="There is not an existing valid proxy. You have to delegate your credentials to create a new one."
								rel="popover" data-placement="right" data-trigger="hover">?</a>
					</h4>		
					<div class="alert alert-success" id="obtainkeyAlert">
						<button type="button" class="close" data-dismiss="alert"
							onclick="$('obtainkeyAlert').hide()">&times;</button>
						<small>The private RSA key can be obtained from the p12
							certificate you have installed in your browser by using:<br /> <i>&nbsp;&nbsp;&nbsp;openssl
								pkcs12 -in yourCert.p12 -nocerts -nodes | openssl rsa </i>
						</small>
					</div>
					<div class="alert alert-warning">
						<strong>NOTE</strong>: <small>the private key WILL
							NOT BE TRANSMITTED ANYWHERE. It is only used locally (within the
							user's browser) to generate the proxies needed to have access to
							the FTS services.</small>
					</div>
					<div class="alert alert-danger" id="serverDelegateAlert"
						style="display: none">
						<small id="delegateDelegateErrorText"></small>						
					</div>
					<div class="row control-group">
						<label class="control-label" for="privateKey">Private Key</label>
						<textarea id="pemPkey" name="pemPkey" class="field form-control"
							rows="5" placeholder="RSA private key"></textarea>
					</div>
					<div class="row control-group">
					   <p class="text-center"><label class="control-label" for="privateKey">Virtual Organization</label><small> (VO only if VOMS credentials are required to access the endpoint)</small></p>
                                           <p class="text-center"><small>Please contact the <a href="mailto:fts-support@cern.ch?subject=Support for new VO&body">support</a> if you wish more Virtual Organizations to be supported</small> </p>
                                        </div>
					<select class="form-control" id="userVO" />
				<div class="modal-footer ">
					<div class="controls center">
						<button type="button" class="btn btn-primary"
							name="delegateButton" id="delegateButton">Delegate</button>
						<button type="button" class="btn btn-primary"
							name="delegateButton" id="closeDelegateButton" onclick="hideDelegateModal()">Close</button>	
						<div id="delegating-indicator" style="display: none">
							<ul class="pager">
								<li><label class="text-center"> Delegating credentials...</label>&nbsp;<img class="pagination-centered" src="img/ajax-loader.gif" /></li>
							</ul>
						</div>	
					</div>
				</div>
			</form>
		</div>
	</div>	<!-- /.modal-dialog -->
	
</div> <!-- /.modal -->