0
Herkese merhaba jQuery kullanarak bir form doğrulaması üzerinde çalışıyorum, form doğrulama ile tamamlandım, şimdi validasyona dayanarak html içeriğinin bölümünü görüntülemek istiyorum. yani benim kodumda content1 ve content2 olmak üzere 2 form var, her formun sonunda bir gönder düğmesi verdim, şimdi ikinci formu yani content2 sadece 1. form content1 tamamen doğrulanmışsa, bunu görüntülemeliyim, bunu nasıl yapabilirim . Bu benim kod ben de jQuery hide ve gösteri kullanarak çalıştı http://codepen.io/inoxe/pen/QNGVEZ?editors=1010jQuery form doğrulaması temel alınarak html'nin bir bölümünün nasıl görüntüleneceği
<!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="page-header">
<h1>Validate </h1>
</div>
<!-- form: -->
<section id="content1">
<div class="col-lg-8 col-lg-offset-2" >
<form id="defaultForm1" method="post" class="form-horizontal" >
<fieldset>
<legend>1st Content</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Username</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Country</label>
<div class="col-lg-5">
<select class="form-control" name="country">
<option value="">-- Select a country --</option>
<option value="fr">France</option>
<option value="de">Germany</option>
<option value="it">Italy</option>
<option value="jp">Japan</option>
<option value="ru">Russia</option>
<option value="gb">United Kingdom</option>
<option value="us">United State</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-5 col-lg-offset-3">
<div class="checkbox">
<input type="checkbox" name="acceptTerms" /> Accept the terms and policies
</div>
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary" value ="a1" >Submit</button>
</div>
</div>
</form>
</div>
</section>
<section id="content2">
<div class="col-lg-8 col-lg-offset-2" >
<form id="defaultForm2" method="post" class="form-horizontal">
<fieldset>
<legend>2nd content</legend>
<div class="form-group">
<label class="col-lg-3 control-label">Email address</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Website</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="website" placeholder="http://" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">US Phone number</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="phoneNumberUS" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">UK Phone number</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="phoneNumberUK" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Hex, RGB, HSL, Keyword color</label>
<div class="col-lg-3">
<input type="text" class="form-control" name="color" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">All colors</label>
<div class="col-lg-3">
<input type="text" class="form-control" name="colorAll" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">US zip code</label>
<div class="col-lg-3">
<input type="text" class="form-control" name="zipCode" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Password</label>
<div class="col-lg-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Retype password</label>
<div class="col-lg-5">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Ages</label>
<div class="col-lg-3">
<input type="text" class="form-control" name="ages" />
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary" value ="a2">Submit</button>
</div>
</div>
</form>
</div>
</section>
<!-- :form -->
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#defaultForm1').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
country: {
validators: {
notEmpty: {
message: 'The country is required and can\'t be empty'
}
}
},
acceptTerms: {
validators: {
notEmpty: {
message: 'You have to accept the terms and policies'
}
}
}
}
});
$('#defaultForm2').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
website: {
validators: {
uri: {
allowLocal: true,
message: 'The input is not a valid URL'
}
}
},
phoneNumberUS: {
validators: {
phone: {
message: 'The input is not a valid US phone number'
}
}
},
phoneNumberUK: {
validators: {
phone: {
message: 'The input is not a valid UK phone number',
country: 'GB'
}
}
},
color: {
validators: {
color: {
type: ['hex', 'rgb', 'hsl', 'keyword'],
message: 'Must be a valid %s color'
}
}
},
colorAll: {
validators: {
color: { }
}
},
zipCode: {
validators: {
zipCode: {
country: 'US',
message: 'The input is not a valid US zip code'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and can\'t be empty'
},
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: 'The confirm password is required and can\'t be empty'
},
identical: {
field: 'password',
message: 'The password and its confirm are not the same'
}
}
},
ages: {
validators: {
lessThan: {
value: 100,
inclusive: true,
message: 'The ages has to be less than 100'
},
greaterThan: {
value: 10,
inclusive: false,
message: 'The ages has to be greater than or equals to 10'
}
}
}
}
});
});
</script>
</body>
</html>
olduğunu :) Çok teşekkür ederim ama kuvvetiyle çalıştı ve ben kullanılan kod
<script>
$(document).ready(function(){
$("#content1").show();
$("#content2").hide();
$("button").click(function() {
if (this.value == 'a1')
{
$("#content1").hide();
$("#content2").show();
}
else if (this.value == 'a2')
{
$("#content2").hide();
$("#content1").show();
}
});
});
</script>
oldu Lütfen bu sorunu çözmek için bana yardımcı olun, teşekkür ederim.
teşekkürler u somuch madalin ivascu :) Ayrıca ikinci formun görüntülendiği zaman 1. formu saklamak istiyorum, bunu nasıl yapabilirim. – inoxe
add '$ ('# defaultForm1'). Hide();' başlangıçtaki gösterinin ilk gösterisinden sonra – madalinivascu
teşekkürler u somuch :) gerekli olanı buldum :) – inoxe