Estoy armando un sistema que utilice html + css + php + ajax + jquery, hasta ahora he estado usando trozos de codigo para armar el sistema y todo bien sin embargo tengo un problema con un plugin para jquery llamado ideal forms (v3) que quiero usar para la creacion y validacion de los formularios en tiempo real, el problema es que el codigo deberia cargar una formulario dentro de un div pero al hacerlo la estructura del formulario se daña asi que quisiera ayuda para saber cual es la causa
codigo
prueba.php(como deberia verse el formulario):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link rel="stylesheet" href="librerias/jq-idealforms-master/css/jquery.idealforms.css">
</head>
<body>
<div style="width: 700px; position: absolute; top: 100px;">
<div class="idealsteps-container">
<nav class="idealsteps-nav"></nav>
<form action="" autocomplete="off" class="idealforms">
<div class="idealsteps-wrap">
<!-- Step 1 -->
<section class="idealsteps-step">
<div class="field">
<label class="main">Username:</label>
<input name="username" type="text" data-idealforms-ajax="ajax.php">
<span class="error"></span> </div>
<div class="field">
<label class="main">E-Mail:</label>
<input name="email" type="email">
<span class="error"></span> </div>
<div class="field">
<label class="main">Password:</label>
<input name="password" type="password">
<span class="error"></span> </div>
<div class="field">
<label class="main">Confirm:</label>
<input name="confirmpass" type="password">
<span class="error"></span> </div>
<div class="field">
<label class="main">Date:</label>
<input name="date" type="text" placeholder="mm/dd/yyyy" class="datepicker">
<span class="error"></span> </div>
<div class="field">
<label class="main">Picture:</label>
<input id="picture" name="picture" type="file" multiple>
<span class="error"></span> </div>
<div class="field">
<label class="main">Website:</label>
<input name="website" type="text">
<span class="error"></span> </div>
</section>
<div class="field buttons">
<label class="main"> </label>
<button type="submit" class="submit">Submit</button>
</div>
</section>
</div>
<span id="invalid"></span>
</form>
</div>
</div>
<script type="text/javascript" src="librerias/jquery-3.1.1.js"></script>
<script src="librerias/jq-idealforms-master/js/out/jquery.idealforms.js"></script>
<script>
$('form.idealforms').idealforms({
silentLoad: false,
rules: {
'username': 'required username ajax',
'email': 'required email',
'password': 'required pass',
'confirmpass': 'required equalto:password',
'date': 'required date',
'picture': 'required extension:jpg:png',
'website': 'url',
'hobbies[]': 'minoption:2 maxoption:3',
'phone': 'required phone',
'zip': 'required zip',
'options': 'select:default',
},
errors: {
'username': {
ajaxError: 'Username not available'
}
},
onSubmit: function(invalid, e) {
e.preventDefault();
$('#invalid')
.show()
.toggleClass('valid', ! invalid)
.text(invalid ? (invalid +' invalid fields') : 'All good!');
}
});
$('form.idealforms').find('input, select, textarea').on('change keyup', function() {
$('#invalid').hide();
});
$('form.idealforms').idealforms('addRules', {
'comments': 'required minmax:50:200'
});
$('.prev').click(function(){
$('.prev').show();
$('form.idealforms').idealforms('prevStep');
});
$('.next').click(function(){
$('.next').show();
$('form.idealforms').idealforms('nextStep');
});
</script>
</body>
</html>
prueba2.php(donde esta el div que va a contener el formulario):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script type="text/javascript" src="librerias/jquery-3.1.1.js"></script>
<script type="text/javascript" src="scripts_prueba.js"></script>
</head>
<body>
<div id="asd"> <a id="cargar">cargar</a> </div>
</body>
</html>
script de carga
$(document).ready( function (){
$("#cargar").click(function(e){
e.preventDefault();
$( "#asd" ).fadeOut(250,
function(){$("#asd").load("prueba.php",
function(){$("#asd").fadeIn(250); });
});
});
});